1

サイドバーを作成しようとしています。さて、デザインは 3 div のはずです。ヘッダー (既に行われています)、サイドバー、およびメイン div。

サイドバーは、画面の左側にあり、下部まで伸びています (高さ: 100%)。私が立ち往生している問題は、その高さが div にあるテキストの行数までしか伸びないため、100% Div を作成できないことです。

私が現在持っているサイドバーのCSSは次のとおりです。

#sidebar {
    float: left;
    margin-top:36px;
    width: 300px;
    height:100%;
    background-color: #111211;
}

私が現在持っている本文のCSSコードは次のとおりです。

body {
    margin:0;
    padding:0px;
    background-color:#87AFC7;
}

HTMLコードは次のとおりです。

<body>
  <div id="sidebar"> left-sidebar </div>
</body>
4

4 に答える 4

1

次のようなことを試してみてください。

CSS

#container {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
#top, #left, #right {
    position: absolute
}
#top {
    top: 0;
    width: 100%;
    height: 50px;
    background: #00b7f0
}
#left {
    top: 50px;
    width: 50px;
    bottom: 0px;
    background: #787878
}
#right {
    top: 50px;
    left: 50px;
    right: 0;
    bottom: 0px;
    background: #ff7e00
}

HTML

<div id="container">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

これが実際のライブデモです。

お役に立てれば..

于 2012-08-09T05:57:29.210 に答える
1

サイドバーの親の高さを に設定し、次にその親を設定する必要があり100%ます。サイドバーはbody要素の直接の子であるため、これを CSS に追加するだけです。

html,body { height:100%; }
于 2012-08-09T04:09:16.457 に答える
0

これを試して、私に知らせてください

#sidebar {
    position:fixed;
    right:0px;
    margin-top:36px;
    width: 300px;
    height:100%;
    background-color: #111211;
}

body, html {

hieght:100%

}
于 2012-08-09T06:12:30.237 に答える
0

パーセンテージの代わりにピクセルを使用できます。

height:1000px;
于 2012-08-09T04:29:35.437 に答える