0

あなたの助けが必要です、

以下の既存のコードをどのように変更して、css ボックスの高さが流動化されるようにすることができますか (ユーザーの画面解像度の高さに合わせて調整する必要があるため)。

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
* { margin:0; padding: 0 }
#container {
    width: 100%;
    margin: 0 auto;
}

#primary {
    float: left;
    width: 10%;
    background: red;
    height: 600px;
}

#content {
    float: left;
    width: 80%;
    background: blue;
    height: 600px;
}

#secondary {
    float: left;
    width: 10%;
    background: green;
    height: 600px;
}


</style>

</head>

<body>
<div id="container">


    <div id="primary">
        <p>left</p>
    </div>


    <div id="content">
        <p>center</p>
    </div>


    <div id="secondary">
        <p>right</p>
    </div>


</div>
</body>

</html>
4

3 に答える 3

0

table* 表示プロパティを使用すると、同じ高さの列を簡単に実現できます。

http://cssdeck.com/labs/2iy6anjy

#container {
    display: table;
    width: 100%;
    margin: 0 auto;
}

#primary {
    display: table-cell;
    width: 10%;
    background: red;
}

#content {
    display: table-cell;
    width: 80%;
    background: blue;
}

#secondary {
    display: table-cell;
    width: 10%;
    background: green;
}
于 2013-06-07T16:45:32.707 に答える
0

固定高さを削除して与えるoverflow:hidden

于 2013-06-07T16:46:15.973 に答える