Question

我正在构建一个网页，它有一个名为content的div标签，其CSS属性为min-height：200px;我想放入另一个高度为100％的div标签，但是，这不起作用。我希望它能够自动增长，以便在内容变大时看起来很漂亮。但是我不确定如何做到这一点。

感谢任何帮助，但我希望它是XHTML严格和CSS3兼容。

尝试执行以下操作： Something like this

- 他们的灰色边栏，是我想做的，它是在油漆中添加的，其余的我已经用CSS3完成。

Answer 1

我理解身高的问题：100％以下是我只使用css：

的方法

这里是：

<html>

<head>
<style type="text/css">
    body{
        background-color: #cbf;
    }

    #wrap {
        border-radius: 20px;
        margin: 10px auto;
        overflow: hidden;
        width: 900px;
    }

    #head {
        text-align: center;
        background-color: red;
        height: 100px;
        overflow: hidden;
    }

    #main {
        float: left;
        background-color: gray;
        min-height: 200px;
    }

    #sidebar {
        width:200px;
        float: left;
        background-color: gray;
    }

    #content {
        float:left;
        background-color: white;
        min-height: 200px;
        width: 700px;
    }

</style>
<title>
    example
</title>
</head> 

<body>
<div id="wrap">
    <div id="head">
        <h1>example site name</h1>
    </div>
    <div id="main">
        <div id="sidebar">
            &nbsp;
        </div>
        <div id="content">
            &nbsp;
            <p>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>

            </p>
        </div>
    </div>
</div>
</body>
</html>

您也可以使用

创建侧边栏

        #wrap {
            background: url('bg.png') repeat-y white;
        }

bg.png需要是1像素高的图像，其宽度与侧边栏相同。使用css height 100％在这种情况下不起作用。

希望这有帮助。

自动扩展侧柱

1 个答案: