HTML 中固定宽度、100% 高度的对象

发布于 2024-10-31 06:35:34 字数 324 浏览 0 评论 0原文

所以,也许我只是不擅长搜索,但我真的很难找到一种方法来做到这一点,所以这里......

我有一个带有固定图像背景的网页(平铺,非滚动)。 我现在想要在上面有一个彩色 div(700px 宽,100% 高度,居中),然后我可以在其中放入更多内容(不一定非得是一个 div,我只是想要在中心有一个彩色区域.)

这是我正在努力的图片:http://bit.ly/g5qgj0 浅色区域(其上是其他所有区域)是我想要实现的目标。

预先感谢,我仍在了解 HTML/CSS,这让我对 XP 感到疯狂

So, maybe I just suck at searching, but I'm having real trouble finding a method to do this, so here goes...

I have a webpage with a fixed image background (tiled, non scrolling).
I now want to have a colored div on top of that (700px wide, 100% height, centered) that I can then put more content within (doesn't necessarily have to be a div, I just want a colored area in the center.)

Here's an image of what I'm working towards: http://bit.ly/g5qgj0
The lightly colored area (on top of which lies everything else) is what I'm trying to achieve.

Thanks in advance, I'm still getting to know HTML/CSS and this has been driving me crazy XP

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

探春 2024-11-07 06:35:34
html, body{
    margin:0;
    padding:0;
    height:100%;
}
body{
    background:transparent url(...) repeat 0 0;
}
div{
    margin:0 auto;
    width:700px;
    height:100%;
    background:white;
}

检查工作示例 http://jsfiddle.net/TGt4A/

html, body{
    margin:0;
    padding:0;
    height:100%;
}
body{
    background:transparent url(...) repeat 0 0;
}
div{
    margin:0 auto;
    width:700px;
    height:100%;
    background:white;
}

Check working example at http://jsfiddle.net/TGt4A/

回忆那么伤 2024-11-07 06:35:34

我认为最简单的方法就是使用 Javascript/jQuery,我在 JSFiddle 中就是这样做的。您可能希望在该 #container 上添加 CSS min-height 作为 Javascript 被禁用或其他情况的后备。

I think your most foolproof way to do this is going to involve Javascript/jQuery, which I did in JSFiddle. You might want to add a CSS min-height on that #container as a fallback if Javascript is disabled or whatever.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文