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 に答える