0

Web ページ レイアウト テンプレートを作成しようとしています。私の目的は、ヘッダー、フッター、およびその間の 2 列です。2 つの列が最大の頭痛の種です。左の列を固定幅にし、右の列を埋めたいと思っています。残りのエリア、これも無事完了。しかし、両方の列が雨が降っているスペースを垂直方向にも埋める必要があり、コンテンツがスペースを超えていっぱいになると、各列が個別に叱られ、通常のBrowerスクロールバーを使用しない

私の現在のhtmlコードは次のとおりです

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
    <link rel="stylesheet" type="text/css" href="./style/default/style.css" />
</head>
<body>
  <div class="container">
    <div class="header">
     HEADER
    </div>
    <div class="content">
      <div class="content-contain">
        <div id="content-col1">
         COLUMN 1
        </div>
        <div id="content-col2">
         COLUMN 2
        </div>
      </div>
    </div>
  </div>
<div class="footer">
  FOOTER
</div>
</body>
</html>

CSS

* {
  margin: auto;
}

html, body {
  height: 99%;
  background-color: #FFFFFF;
  font-family:sans-serif;
}

.container {
  min-height: 100%;
  height: auto !important;
  height: 99%;
  margin: 0 auto -1em; 
}

.header {
  color:#FFFFFF;
  background-color:blue;
  border-bottom:3px solid blue;
}

div#content-col1{
  float:left;
  width:220px;
  padding:3px;
  display:block;
  padding-left:5px;
  overflow-y: auto; 
  background-color: red;
}

div#content-col2{
  margin-left: 230px;
  margin-bottom:40px;
  padding: 3px;
  overflow-y: auto;
  background-color: green; 
}

.footer {
  background-color:yellow;
  clear:both;
}

誰かがこれをうまく機能させるために何ができるか知っている場合は、私に知らせてください

Vip32

4

1 に答える 1

1

1つが固定されている2つの列で幅全体を埋めるには、この質問を参照してください。

垂直方向の塗りつぶしは少し異なります。デフォルトでは、要素bodyとblock要素の高さは動的です。bodyも動的であるため、コンテンツを垂直方向にも完全にするために、高さを設定する必要があります。

body, div#container, ... { height: 100%; }

html要素にも高さを適用するのが最善だと考える人もいます。そのタグが表示されていないので、私は疑問を持っています。

ヘッダーやフッターなど、ある程度の高さも必要な要素がある場合は、固定幅についても同じ解決策を参照してください。ただし、代わりに高さに適用してください。

于 2013-02-15T12:31:07.987 に答える