1

我在下面创建了一个简单的 HTML 布局,它显示了一类左栏和一个内容区域。我计划为此添加样式,以便在将内容添加到内容 div 时,左侧栏的高度将随之增加。

    <body>
    <div class="wrap">

        <div class="header">
            <h1>Main Title of Web Page</h1>
        </div>

        <aside class="left">
            HTML </br>
            CSS </br>
            JavaScript </br>
        </aside>

        <aside class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, reiciendis, ea, dignissimos illum et laborum voluptate dolorem dolores vel minima fugit expedita perspiciatis est vero reprehenderit aperiam veritatis officia enim?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, libero consequuntur nostrum sunt molestias ea similique harum voluptates officia eius distinctio impedit autem ut alias beatae neque minima suscipit facere!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, facilis harum aperiam maxime incidunt quasi eveniet iste quas atque deserunt ad accusantium amet nostrum explicabo corporis laborum tempore provident quam.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, eos, illo odit vero quo atque perspiciatis eveniet quidem necessitatibus omnis in nobis reprehenderit ea minus repellendus illum totam id. Aliquam?</p>


        </aside>

        <footer style="clear:both">
            <p>Copyright &copy; CA</p>
        </footer>


    </div>
</body>

下面是我到目前为止所做的,但是,当我添加更多内容时,文本会溢出 div 并且看起来很难看。

body{
    margin:0px;
    padding: 0px;
}
p{
    padding:10px 0px;
}
.wrap{
    width: 960px;
    margin: 25px auto;
}
.header{
    background-color: #faa600;
    height:100px;
    width: 960px;
    margin:0px;
    padding: 0px;
}
.left, .content{
    height: 400px;
    padding: 10px;
}
.left{
    float:left;
    width: 180px;
    margin: 0px;
    background-color: #fbd917;
}
.content{
    width: 740px;
    float: right;
    margin: 0px;
    background-color: #eeeeee;
}
footer{
    background-color: #faa600;
    width: 960px;
    height: 50px;
    text-align: center;
}
4

2 回答 2

-1

首先,你可以给它们同名的 css 并在 1 个同名的周围放置一个 div。所以你可以让它们的高度都是 100%,你仍然可以把它们放在一起。

于 2013-06-20T13:30:00.160 回答
-1

最简单的解决方法是:设置.wrapbackground-color:#fbd917;(并从中删除.left)然后height从选择器中删除属性.left, .content

http://jsfiddle.net/ybH4p/

于 2013-06-20T13:58:40.920 回答