1

divを使用せずに、ページの残りの部分に合わせてa を拡張する方法を見つけようとしていますJavaScript。

私が最初に書いたいくつかのコード:

HTML: 

​<div class="bodyContainer">
    <div class="sidebar"></div>
    <div class="container"></div>
</div>

CSS: 

.bodyContainer {
 border: 1px solid black;
 width: 100%;
 min-height: 50px; 
 height: 100%;    
}

.sidebar {
    height: 100%;
}

.container {
    height: 100%;
}

上記のコードdivは、ページの残りの部分に合わせて を拡張していません。

JSFiddleまた、何が起こるかを確認するために始めました。リンク: JSFiddle

4

4 に答える 4

6

高さと幅を html 要素と body 要素にも追加する必要があります。

html, body
{
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/Kyle_/BwVWx/4/

于 2012-09-13T11:50:02.337 に答える
1

上記の回答には正しい情報が含まれていますが、CSS を初めて使用する人のために情報にいくつかのギャップを追加しています。

クラスを追加してdivを100％にしようとすると、これが得られます

ここに画像の説明を入力

100%したがって、の高さに追加する必要がbodyありますhtml

ここに画像の説明を入力

divの周りにはまだ「空白」があります。したがって、パディングとマージンを削除します。

ここに画像の説明を入力

CSS

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* your class for the div should have 100% height and width */
.bg-full {
  background-color: #777; /* you can add a color to visually test your code */
  width: 100%;
  height: 100%;
}

CodePenでデモを見ることができます

于 2015-12-02T17:57:08.750 に答える
0

height: 100%;HTMLおよびBODY要素にを追加してみてください。

html, body {
    height: 100%;
}

http://jsfiddle.net/BwVWx/3/

于 2012-09-13T11:51:35.783 に答える
0

box-sizing: border-box;水平スクロールバーの表示を回避するには、cssプロパティを使用します。これが更新された例です。

ボックスサイズのcssプロパティについて。

于 2012-09-13T11:51:36.127 に答える