Div 不会拉伸页面的整个高度（是的，我已经用 Google 搜索了很多）

发布于 2025-01-02 21:17:12 字数 1884 浏览 0 评论 0原文

我正在尝试将 div 的内容拉伸到页面的高度。我用谷歌搜索了这个问题，到目前为止没有任何效果。整件事开始让我头疼。也许更有经验的人可以看看我的代码？完整的样式表超过 400 行，因此我包含了（希望）相关的内容。

“Wrapper”占据 100% 的页面高度，而“contentShadow”仅拉伸到 div“content”中文本的高度。

编辑：据我所知，每个容器的高度都设置为 100%，这也会使“contentShadow”为 100%。正确的...？

编辑 2：我开始发现问题，但不知道如何解决。虽然以下代码将使页脚保持向下，但这也意味着由于 .wrapper 没有 height:100%，因此“contentShadow”不会拉伸。那么问题是我如何在更改此代码时保持页脚向下：

.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;

}

对此：

.wrapper {
height: 100%;

}

页面的基本结构：

<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">  
    <div id="contentShadow">
        <div id="#contentWrapper">
            <div id="content">
            <!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
            </div> 
        </div>
    </div>

<div id="push"></div>
</div>

<div id="footer"></div>

与这些 div 相关的 CSS 规则：

html, body {
height: 100%;
}

#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}

#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
   margin-right: auto;
margin-left: auto;
}

#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}

#content {   
min-height: 100%;
}

.footer, .push,  {
height: 37px;
}

.footer {
background: white;   
clear: both;
height: 37px;
}

原文

I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.

"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".

Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?

Edit 2: I'm starting to see the problem, but don't know how to solve it. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:

.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;

}

To this:

.wrapper {
height: 100%;

}

Basic structure of the page:

<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">  
    <div id="contentShadow">
        <div id="#contentWrapper">
            <div id="content">
            <!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
            </div> 
        </div>
    </div>

<div id="push"></div>
</div>

<div id="footer"></div>

Css rules relevant to these divs:

html, body {
height: 100%;
}

#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}

#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
   margin-right: auto;
margin-left: auto;
}

#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}

#content {   
min-height: 100%;
}

.footer, .push,  {
height: 37px;
}

.footer {
background: white;   
clear: both;
height: 37px;
}

分享到QQ

分享到微博

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

发布评论

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

給妳壹絲溫柔 2025-01-09 21:17:12

您的代码确实错误：

.wrapper 匹配
而不是
。
不正确，您应该尝试
height: auto;< /代码> 是问题所在。包装器的高度需要是 100%，而不是 auto...
height: auto !important 之后的 height: 100% 没有意义，因为 !important关键词。

回复收藏 0 原文

千笙结 2025-01-09 21:17:12

也许这是默认的边距和填充，你尝试过吗？

body {margin: 0px; padding: 0px; }

Maybe it's the default margins and padding, have you tried this?

body {margin: 0px; padding: 0px; }

回复收藏 0 原文

南风起 2025-01-09 21:17:12

我一生中的大部分时间都遇到这个问题，但我只是自己解决了它，所以我分享，以防其他人受益。

我的 HTML/BODY 选择器设置为 height:100%。

我的 HTML/BODY 选择器中的容器 div 设置为 min-height:800px。

CONTAINER div 内的 CONTENT div 没有高度，并且我遇到了 div 未拉伸到页面底部的问题。当我检查这个 div 时，我注意到由于某种原因，它远远低于其容器 div，将其向上推并在页面底部创建了令人讨厌的空间。一旦我在 DIV 内设置了高度，问题就消失了。

我希望这有帮助。

回复收藏 0 原文

心碎无痕… 2025-01-09 21:17:12

contentShadow 必须具有溢出：自动。试试这个

body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }


<body>
  <div id="container">
      This should fill the page!
  </div>
</body>

The contentShadow must have overflow: auto. Try this

body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }


<body>
  <div id="container">
      This should fill the page!
  </div>
</body>

回复收藏 0 原文

~没有更多了~