-1

次のレイアウトでページを作成しようとしています： 希望のレイアウト

  • ページはビューポート全体を占有します:html, body {height: 100%}
  • #headerページの上部にありますheight: 80px
  • 実際のページ コンテンツ ( #content) は残りのすべてのスペースを取り、余白を付けて 3 列に分割します

列については、子を.row-fluid持つブートストラップを使用してspan-Xいます。

position: staticforを使用してページに#header設定height: 100%する#contentと、高さがビューポートより 80px 大きくなります。

#headerを使用して の位置を設定しposition: absolute、前にいくつかの要素を追加する#contentとheight: 80px、ページはビューポートより 80 ピクセル大きくなります。#content空の要素を追加する代わりに、マージンとパディングを設定しようとしましたが、これは役に立ちませんでした。

4

2 に答える 2

1

put your headerbefore contentand give itwidth:100%; height:80px; position:absolute;と Give.column{margin-top: 85px;}は、探していたものと同様のことを行います。 jsfiddle

<html>

<div id="header"></div>
<div id="content">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

<style>

#header{
width:100%;
height:80px;    
background:red;
position:absolute;

}

#content{

width:100%;
height:100%;    
background:blue;

}
.column{
margin-top: 85px;
float: left;
position: relative;
width: 20%;
margin-left: 95px;
background: #FF0;
height: 75%;
}

html{height:100%;}
body{height: 100%;
margin: 0;}
于 2013-06-26T09:41:49.340 に答える
0

オーバーフローを防ぐには、#headerと の両方#contentを a#containerに入れ、コンテナーに を指定してheight: 100%ください。

しかし、ページ全体を上から下まで埋めるには、display: flex https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxesまたは.parent { display: table;} .child {display: table-cell;}

于 2013-06-26T09:52:55.770 に答える