0

3 列のテーマがあり、すべての列を同じ高さにしたいと考えています。列の左右の高さは固定されており、動的な高さの列の中央と同じである必要があります。

レイアウトコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
    <head>
    <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="container">
            <div id="sidebar-left">Sidebar left</div>   
            <div id="sidebar-middle">BIG SIDEBAR MIDDLE</div>  
            <div id="sidebar-right">Sidebar right</div> 
        </div>
    </body>
</html>

'

CSS コード:

html,
body {
    height:100%;
    background:#FFEE33;   
}
#container {         
    min-height:100%;
    background:#FFAA00; 
}           
#sidebar-left,
#sidebar-right{   
    float:left;
    width:33%;
    min-height:100%; 
    background:#FF0000;
}  
#sidebar-middle {  
    float:left;
    width:33%;
    height:2000px;
    background:#444;
}

これは CSS だけで作成できますか? どんな助けにも感謝します。

4

1 に答える 1

0

列の後にclearfixを追加してみてください。これにより、コンテナの内容に応じたサイズになります。要素をフロートすると、高さの値が失われます。フロートされた要素のリストの後にクリアを追加することで、要素はこのプロパティを取り戻します。

単純 -

cssに追加

.clearfix{
  clear: both;
  position: relative;
}

およびhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
    <head>
    <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="container">
            <div id="sidebar-left">Sidebar left</div>   
            <div id="sidebar-middle">BIG SIDEBAR MIDDLE</div>  
            <div id="sidebar-right">Sidebar right</div> 
            <div class="clearfix"></div>
        </div>
    </body>
</html>

それはあなたを正しい方向に向けさせるはずです。

于 2013-01-14T16:19:18.837 に答える