0

我浏览了大部分关于此的帖子，但没有任何帮助。

我需要将高度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其余部分也不会扩展，因此会出现。有什么解决办法吗？divsiframescrollbar

另一个问题：

iframe 的 div 不占用整个宽度。我将 20% 用于#list 和 55% 用于 #links，以便它适合父 div #container 75%。这不会发生！

4

1 回答 1

2

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

添加这个CSS：

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

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

然后只需将full-height类添加到要占据其容器全高的元素即可。


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

不过有一些提示：

  1. 不要使用align属性。它已被弃用。改用 CSS 浮动。

  2. 不要使用infotext或windowCSS 颜色值。这些是系统颜色。不推荐使用所有系统颜色，因为它们仅适用于某些操作系统/浏览器组合。使用有效的颜色关键字之一，或使用十六进制/rgb 表示法。

  3. 不要将<br>标签用于视觉间距。改用 CSS 边距。

  4. 不要将像 s 这样的块级元素粘在像<h4>s 这样的内联元素<span>中。

  5. 在极少数情况下使用 aniframe是个好主意。尝试重新考虑您的问题，看看您是否可以提出替代解决方案。

  6. 使您的#header元素成为实际<header>元素。要支持 IE8，请将此答案底部的 JS 片段添加到您的 JS。

  7. 使您的#list元素成为实际的列表元素 ( <ul>)。如果您不喜欢列表的默认样式，请使用此答案底部的 CSS 片段重置它们。


JS 片段：

document.createElement('header');


CSS 片段：

ul.reset,
ol.reset {
    list-style: none;
    margin: 0;
    padding: 0;
}
于 2013-02-07T05:27:07.370 回答