5

所以。我的代码类似于

<html>
<body>
    <div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
        <img src="header_image.svg" />
    </div>
    <div id="content" style"display:block">
        Some content
    </div>
</body>
</html>

我在我设置的标题中有一个 svg，以便它匹配窗口的宽度和高度比例以保留 svg。然后我将页面的其余部分放在另一个 div 中。我希望它不会滚动页面并且此内容 div 填充以适合窗口的其余部分。问题是，由于标题的高度随窗口的宽度而变化，我无法以像素或百分比或任何具体内容设置内容 div。

如何设置内容 div 的高度以随着标题的高度动态变化？

我不知道 Javascript 或 JQuery（我知道，我知道 - 我应该），但理想情况下，内容 div 的高度将设置为类似于高度：（视口高度）-（标题高度），但我不知道如何做到这一点。

4

1 回答 1

23

您不必为此使用脚本。还有：我建议您将样式与标记分开。

HTML

<div id="wrapper">
    <div id="header">
        <img src="header_image.svg" alt="the img is empty"/>
    </div>
    <div id="content">Some content</div>
</div>

将此添加到您的CSS

html, body {
    height: 100%;
    margin: 0px;
}

/* this is the big trick*/
#wrapper:before {
    content:'';
    float: left;
    height: 100%;
}
#wrapper {
    height: 100%;
    background-color: black;
    color: white;
}
#header {
    background-color:#000;
}
#content {
    background-color: gray;
}
/* this is the big trick*/
#content:after {
    content:'';
    display: block;
    clear: both;
}

工作小提琴

测试： IE10、IE9、IE8、FF、Chrome。

  1. 没有使用绝对定位
  2. 没有使用脚本（纯 CSS 解决方案）
  3. 流体布局
  4. 跨浏览器

说明： 使用伪元素，我正在创建一个具有 100% 容器高度的浮动元素（没有内容或宽度，因此他是不可见的）。

并且使用另一个伪元素，我在 div 之后创建了一个contentdiv。（也没有内容，所以他也是隐形的）具有clear属性。所以他必须低于我之前创建的浮动。使contentto 一直向下。

于 2013-09-14T22:54:11.407 回答