3

「トップ」と「メイン」の2つのdivを持つhtmlページを作成しようとしています

トップ<div>はそれに含まれる要素の代わりに配置する<div>必要があり、メインは残りのすべての場所に配置する必要があります。

これが私が試したものです：

CSS コード :

html,body{
  height:100%;
}

#top{
  background-color : red;
  padding:10px;
  border:1px solid;
}

#main{
  background-color : blue;
  height:100%;
  padding:10px;
  border:1px solid;
}

#content1{
  background-color:yellow;
}

#content2{
  background-color:yellow;
  height :100%;
}

HTML コード:

<!DOCTYPE html>
<html>
  <head></head>
  <body>

    <div id="top">
      <div id="content1">content1</div>
    </div>

    <div id="main">
      <div id="content2">content2</div>
    </div>

  </body>

</html>

ここにjsFiddleがあります

ご覧のとおり、「content2」に設定した「100%」により、この div は残りのスペースではなく、ページの高さの 100% を占めます。これを修正するための魔法の css プロパティはありますか?

編集：

すべてのソリューションに感謝します。

私は最終的に、Riccardo Pasianotto によって提案された CSS プロパティdisplay:tableとdisplay:table-row.

これが私の最終的なHTMLコードです:

<!DOCTYPE html>
<body>
  <div id="content1" class="row">
    <div class="subcontent">
      <div class="subContentContainer">
         content1
      </div>
    </div>
  </div>
  <div id="content2" class="row">
    <div class="subcontent">
      <div class="subContentContainer">
        content2
      </div>
    </div>
  </div>    
</body>

対応するCSS コードは次のとおりです。

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

body{
  display:table;
}

.row{
  display:table-row;
  width:100%;
}

#top{
  height:100px;
}

#content1{
  background:#aa5555;
  padding:10px;
}

#content2{
  background:#5555AA;
  height:100%;
}

.subcontent{
  padding : 10px;
  height:100%;
}

.subContentContainer{
  background-color:yellow;
  height:100%;
}

そして、これが対応するJsfiddleです。

4

5 に答える 5

2

デモジフ

これを行うにはdisplay:table、そのように編集する必要があります

html,
body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
}
.row {
  display: table-row;
  width: 100%;
  background: red;
}
#top {
  height: 100px;
}
#content1 {
  background: yellow;
  height: 100%;
}
#content2 {
  overflow: scroll;
  height: 100%;
  border: 1px solid black;
}
<body>

  <div id="top" class="row">
    <div id="content1">content1</div>
  </div>

  <div id="main" class="row">
    <div id="content2">content2</div>
  </div>

</body>

于 2013-06-25T09:00:12.033 に答える
1

私がよく行うことは、パディングなしでコンテナを作成しmin-height: 100%、コンテンツを適切な高さ (auto) にすることです:

これは次のようになります：

#container {
    background-color : #5555AA;
    min-height: 100%;
}
#content2 {
    background-color:yellow;
    margin: 10px;
}

http://jsfiddle.net/5cEdq/25/

これがまさにあなたが望むものかどうかはわかりませんが、絶対にすることなく「残りのスペースを埋める」だけでdivを作成することはできません。あなたも本当に欲しくないもの。

于 2013-06-25T08:48:08.623 に答える
0

これを修正するための魔法の css プロパティはありますか?

はいあります。それは呼ばれていますbox-sizing

box-sizing プロパティの詳細については、この記事を参照してください。

フィドル

したがって、ヘッダーの高さが 64px の場合、次のようにします。

 .container {
   height: 100%;
   background: pink;
   margin-top: -64px;
   padding-top: 64px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
<header>header</header>
<div class="container">
  <div class="content">
    content here
  </div>
</div>

于 2013-06-25T08:47:37.167 に答える