3

body タグの直接の子として div#header と div#body を持つ html/css レイアウトが必要です。div#body で残りのスペースを埋めたいのですが、JavaScript は使用したくありません。div#header の正確な高さを知っていれば可能です。しかし、私はそれを修正したくありません。

固定 div#header の例

<head>
    <style>
        html, body {
            position: relative;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        div {
            width: 100%;
        }
        #header {
            position: relative;
            <!-- i want to remove height because i want the header to size itself 
                 dependent on it's content -->
            height: 100px;
            background-color: red;
        }

        #body {
            <!-- I want to make the body position relative and set top to 0 
                 but that does not work as expected.-->
            position: absolute;
            top: 100px;

            margin: 0;
            bottom: 0;
            background-color: green;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="body">body</div>
</body>

div と css を使用する代替手段があれば教えてください。よろしくお願いします！

4

3 に答える 3

2

更新された答えは次のとおりです。私が行ったことは、親のhtmlとbodyをテーブルとして表示し、他のdivにテーブル行のプロパティを持たせることです。このcssにより、画面領域全体がキャプチャされます。

これで、ヘッダーの高さをautoに設定しました。

と

#bodyは他のスペースを継承しています。

これを試してください：http：//jsbin.com/ezozeb/5/edit

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

#header {
  background-color: red;
  display:table-row;
  height:auto;
}
#body {
  background-color: green;
  display:table-row;
  height:inherit;
}
于 2012-11-16T15:01:01.870 に答える
2

ボディ div の を に設定してmin-height、ボディ div100%を引き伸ばすことができます (より明確にするために、ボディの背景色を変更しました)。

ただし、2 番目の要件については 100% 明確ではありません ( <!-- I want to make the body position relative and set top to 0 but that does not work as expected.-->)

ここでフィドル

于 2012-11-16T14:17:52.180 に答える
0

まず、 body 要素の高さと幅を削除します。

ページラッパーを使用してそれを実現できます。

#PageWrapper
{
  width: 844px;
  background-color: ##4628C4;
  margin: auto;
}

#PageContentWrapper
{
  width: 659px;
  float: left;
  background-color: #e1e1e1;
  min-height: 500px;
  padding: 10px;
}

pagecontentwrapper は最小の高さを 500px に設定します。html では、これらの識別子を body と div に割り当てることができます

<html>
  <head>
    <link...>
  </head>
  <body id="PageWrapper">

    <div id="PageContentWrapper">
      Content of the body
    </div>
   </body>
</html>

div をスクロール可能にしたい場合は、高さおよび/または幅を定義し、これを css に追加する必要があります。

overflow-x:auto; <!--horizontal-->
overflow-y:auto; <!--vertical-->

たとえば、pagewrappers の高さを 1000 (min-heigt ではない) に設定し、overflow-y: auto; を設定するとします。コンテンツが範囲外になると、スクロールバーが表示されます。

ヘッダーを常に一番上にしたい場合は、次のように適用する必要があります。

#PageWrapper
{
  width: 844px;
  background-color: ##4628C4;
  margin: auto;
}

#Header
{
  background-color:#aaaaaa;
  width: 844px;
  height: 240px;
}

#PageContentWrapper
{
  width: 659px;
  height: 700px;
  overflow-y: auto;
  float: left;
  background-color: #e1e1e1;

  padding: 10px;
}

そしてhtmlで

<html>
  <head>
    <link...>
  </head>
<body id="PageWrapper">
  <div id=Header>
    Headertext
  </div>  
  <div id="PageContentWrapper">
    Content of the body
  </div>
</body>
</html>
于 2012-11-16T14:17:51.827 に答える