html - 将相对定位父项展开为绝对子项的高度 - Thinbug

将相对定位父项展开为绝对子项的高度

时间：2013-12-12 05:58:52

标签： html css css3 responsive-design css-position

我打算有一个流体高度标题，中间内容部分扩展到可用高度，页脚固定在底部。像这样：

layout

<html>
<body>
<header>
     <h1>Bacon ipsum dolor sit amet salami</h1>

     <h2>ribs tongue cow </h2>

</header>
<article>
    <div class="content">content</div>
    <div class="image">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Rage_Against_The_Machine.jpg/250px-Rage_Against_The_Machine.jpg" />
    </div>
    <div class="clear"></div>
</article>
<footer>
     <h3>read more</h3>

</footer>
</body>
</html>

CSS

body {
    height:100%;
}
article {
    position:relative;
    overflow:hidden;
    height: 100%;
    background-color: grey;
}
header {
    background-color:red;
}
.clear {
    clear:both;
}
footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background-color:blue;
    height:64px;
}
.content {
    position:relative;
    height:100%;
    background-color:pink;
    overflow:hidden;
    max-width : 66%;
    float:left;
}
.image {
    float:left;
    width: 34%;
    position:relative;
    right:0;
}

要求：

内容div应该拉伸标题和之间的可用高度页脚
内容div应隐藏文本溢出（无滚动条）。无内容应该出现在页脚下面。
页面不应该有滚动条
页脚应位于页面底部
标题具有动态高度
图片应附在右侧的内容中。

据我所知，我不能将div的高度拉伸到它的绝对孩子的高度，是否有任何技巧可以让我获得所需的布局？

我的问题： 编辑：三星Galaxy S3上的默认WebView浏览器不支持flexbox，这实际上可以在Chrome上运行。

requirements

DEMO：http://jsbin.com/EcUwUbUf/6/edit

2 个答案:

答案 0 :(得分：1)

你遇到的问题来自你使用花车和绝对位置。这两种方法从未用于此类布局，不再是最佳实践。

我在下面重写了你的演示以使用display:inline-block，这也不适用于这种布局，但它是解决此类问题的更好解决方案，也是目前的最佳做法。

DEMO：http://jsbin.com/efEGukar/4/edit?output

flexbox属性集专门针对此类布局而设计，是一种非常好的解决方案，可让您更好地控制网站对不同屏幕尺寸的反应。但是，浏览器仍然在增加支持，但它还没有普及：see the current list here。这是未来的最佳实践，所以如果你正在学习CSS，请采用这种方法。

Here is a good explanation of how to use flexbox.

答案 1 :(得分：0)

我相信您正在看内容区域的滚动条（即使有溢出：隐藏）。我认为这是问题所在。您可以通过将overflow：hidden应用于body来解决此问题。这应该避免滚动条。