Html 将相对定位父对象展开到绝对子对象的高度_Html_Css_Responsive Design_Css Position

Html 将相对定位父对象展开到绝对子对象的高度

html css responsive-design

Html 将相对定位父对象展开到绝对子对象的高度,html,css,responsive-design,css-position,Html,Css,Responsive Design,Css Position,我打算有一个流畅的高度页眉，中间的内容部分扩展到可用的高度，页脚固定在底部。像这样： <html> <body> <header> <h1>Bacon ipsum dolor sit amet salami</h1> <h2>ribs tongue cow </h2> </header> <article> <div class="content"&g

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

<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>

要求：

Content div应拉伸标题和标题之间的可用高度页脚

Content div应该隐藏溢出的文本（没有滚动条）。没有内容应显示在页脚下方

页面不应该有滚动条

页脚应位于页面底部

收割台具有动态高度

图像应与右侧的内容一起显示

据我所知，我不能把一个div的高度延伸到它的绝对孩子的高度，有什么技巧可以让我得到想要的布局吗

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

演示：

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

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

您遇到的问题来自于使用浮动和绝对位置。这两种方法都不适用于此类布局，也不再是最佳实践

我已经重写了下面的演示，使用了

display:inline block

，它也不适用于这种布局，但它是解决此类问题的更好方法，并且是当前的最佳实践

演示：

flexbox

属性集专为这种布局而设计，是一种更好的解决方案，可以让您更好地控制网站对不同屏幕大小的反应。然而，浏览器仍在增加支持，而且还没有普及：。这是未来的最佳实践，所以如果您正在学习CSS，请采用这种方法

您遇到的问题来自于您对浮动和绝对位置的使用。这两种方法都不适用于此类布局，也不再是最佳实践

我已经重写了下面的演示，使用了

display:inline block

，它也不适用于这种布局，但它是解决此类问题的更好方法，并且是当前的最佳实践

演示：

flexbox

你试过给出相对于身体的位置吗？你的问题有点难理解。你能用语言明确地指出哪些代码不适合你？您是否正在尝试将内容div的高度与图像的高度相匹配？顺便说一句，除非我严重误解（这是可能的！），否则此布局不需要浮动或清除。抱歉，我已编辑以澄清此问题@使正文相对定位会使页脚不固定到页面底部。它还将主体的高度折叠到其所有子体的高度。@Zaqx不，我实际上是想使

内容div在高度上展开，以便填充页眉和页脚之间的高度。我更新了我的问题：）你们试过给出相对于身体的位置吗？你们的问题有点难理解。你能用语言明确地指出哪些代码不适合你？您是否正在尝试将内容div的高度与图像的高度相匹配？顺便说一句，除非我严重误解（这是可能的！），否则此布局不需要浮动或清除。抱歉，我已编辑以澄清此问题@使正文相对定位会使页脚不固定到页面底部。它还将主体的高度折叠到其所有子体的高度。@Zaqx不，我实际上是想使内容div在高度上展开，以便填充页眉和页脚之间的高度。我更新了我的问题：）对不起，我现在更新了问题。我目前的问题是扩展content
div以填充页眉和页脚之间的高度。您可以查看图片的JSFIDLE链接。我现在更新了这个问题。我目前的问题是扩展content
div以填充页眉和页脚之间的高度。您可以查看图片的JSFIDLE链接。我已经更新了这个问题，以进一步澄清我的需求。如果您的版本能够在不滚动的情况下强制所有内容都适合视口，那么它将是完美的。e、 g.内容
不得从页面底部推送页脚
，也不得显示在页脚下方。到目前为止，我唯一能做的就是给高度指定一个固定的%宽度，比如。这不允许我使用动态页眉高度：（多亏了你指向flexbox的指针，它现在可以在Chrome上工作，但不能在三星Galaxy S3上的WebView浏览器上工作，这是我的主要目标：（嘿，我昨天稍微研究了一下。我还不是flexbox方面的专家（从今天起，掌握flexbox将使您在业界领先许多人）。也许这会让你更进一步。tho：还要注意你的代码格式。我在你那里看到的最后两个演示有非常混乱的缩进。这相当于编程时穿着不好，人们会有不好的印象。谢谢Zaqx。我通常对缩进感到抱歉
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;
}