Question

我经历了大部分帖子，但没有任何帮助。

我需要将div增加到 100％高度，以使其符合窗口的长度并适用于子div 。

#container{
    width: 75%; 
    background-color: silver; 
    background-position: center;
    min-height: 100px;
    overflow : hidden;
    margin: 0 auto;
}

#header{
    background-color:infotext;
}

h1{
    margin-bottom: 0; 
    color: white;
}

#list{
    width: 20%; 
    background-color:window; 
    float: left;
    height:100%;
}
#links{
    width: 55%;
}

代码：

<body>
    <div id="container">
        <div id="header">
            <h1 align="center">Represent</h1>
        </div>
        <div id="list">
            <span><h4>Fruits</h4></span>
            <hr>
            <p>Apple</p><br>
            <p>Mango</p><br>
            <p>Orange</p>
        </div >
        <div id="links">
        <iframe src="http://www.google.co.in" frameborder="0">
        </iframe>
        </div>
    </div>
</body>

问题是即使container div尺寸很大，divs和iframe的其他部分也不会展开，因此会出现scrollbar。任何解决方案？

另一个问题：

iframe的div不占用整个宽度。我为#list提供了20％，为#links提供了55％，因此它适合父级#container 75％。这不会发生!!

Answer 1

您必须在height: 100%;和<html>元素以及要占据整个高度的子元素上设置<body>：

添加此CSS：

html, body, .full-height {
    height: 100%;
}

body {
    margin: 0; // <-- to avoid unnecessary scrollbars.
}

然后只需将full-height类添加到要占据其容器整个高度的元素中。

您需要提供您的问题的演示，否则我无法帮助您解决所有问题。

但有一些提示：

请勿使用align属性。它被弃用了。请改用CSS浮点数。
请勿使用infotext或window CSS颜色值。这些是system colors。不推荐使用所有系统颜色，因为它们仅适用于某些OS /浏览器组合。使用valid color keywords之一，或使用十六进制/ rgb表示法。
不要将<br>标签用于视觉间距。请改用CSS边距。
不要将像<h4>这样的块级元素粘贴到内联元素（如<span> s）中。
使用iframe的情况很少是一个好主意。尝试重新考虑您的问题，看看您是否可以提出替代解决方案。
将#header元素设为实际的<header>元素。为了支持IE8-在JS的答案底部添加JS片段。
将#list元素设为实际list element (<ul>)。如果您不喜欢列表的默认样式，请使用此答案底部的CSS片段重置它们。

JS代码段

document.createElement('header');

CSS代码段

ul.reset,
ol.reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

div的高度不会动态增长

1 个答案: