1

私はこのような非常にシンプルなレイアウトを持っています

ここに画像の説明を入力してください

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

<!DOCTYPE html>
<html>
<HEAD>
    <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
  </HEAD>
<body>

<div id="wrap">

    <div id="header">
    <p> Im the header. </p> 
    </div>

    <div id="nav">
    <p> Im the nav. </p> 
    </div>

    <div id="sidebar">
    <p> sidebar here </p> 
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    </div>

    <div id="main">
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    </div>

    <div id="footer">
    <p> footer </p> 
    </div>
</div>

<body> 


</html>

CSSは次のとおりです。

#wrap
{ 
    width: 100%; 
    background-color:blue; 
    padding: 10px; 
}

#header 
{ 
    background-color:white; 
    width: 98%; 
    float: left; 
    padding: 10px; 
}

#nav
{ 
    background-color:yellow; 
    padding: 10px; 
    width:100%;

}


#main 
{ 

    width:100%; 
    background:green; 
    padding: 10px; 

}


#sidebar
{ 
    background-color:pink; 
    float:right; 
    float:top; 
    padding: 10px; 
    width:20%;
    height:100%; 

}

#footer 
{ 
    background-color:orange; 
    padding: 10px; 
    width:100%;
    clear:both;


}

今、私はピンクのare /サイドバーがオレンジ色のフッターまですべてのスペースを垂直に埋めることができない理由がわかりませんか？

4

3 に答える 3

1

例： http： //jsfiddle.net/s96Tw/

1）要素#sidebarにコンテンツを追加します。#main

2）要素に追加position:relativeします。#main

3）この余分なコードをcssファイルに追加します。

#sidebar {
  height:100%;
  position:absolute;
  right:0;
  top:0;
  background:pink;
}
于 2013-01-12T13:30:08.373 に答える
0

Mr.Hithereペーパーバッグ

試してみてください...最初にこのリンクのような画像を作成してください

http://www.vanseodesign.com/blog/wp-content/uploads/2011/05/faux-columns-background.png

    background: url("faux-columns.png") repeat-y;

cssで

これが等しい列に関する4つのチュートリアルです：http ：//www.vanseodesign.com/css/equal-height-columns/

幸運を祈ります！

于 2013-01-12T13:51:12.613 に答える
0

#wrapにピンク色を付け、 ＃main幅を〜70％に設定することもできます。これは、回避策としてよく使用されます。

#wrapのパディングにより、境界線もピンクになりますが、ニーズに合うまで遊ぶことができます。

#wrap
{ 
    width: 100%; 
    background-color:pink; 
    padding: 10px; 
}

#main 
{ 

    width:70%; 
    background:green; 
    padding: 10px; 

}

例： http： //jsfiddle.net/y9Yja/

于 2013-01-12T13:36:12.163 に答える