0

HTML と CSS だけを使用してレイアウトを作成しようとしているので、Javascript を使用してレイアウトを行うという追加の複雑さはありません。

以下のレイアウトは、ヘッダー、メイン コンテンツ、フッターの 3 つの部分で構成されています。

レイアウト例

ヘッダーとフッターは同じ高さで、常に表示されている必要があります。サイズを変更すると、ヘッダー、コンテンツ、およびフッターは、いくつかの例外を除いて、それに応じて拡大/縮小する必要があります。まず、メイン コンテンツの最大高さに達すると、メイン コンテンツはそれ以上拡大されず、代わりにヘッダーとフッターだけが拡大されます。第 2 に、メイン コンテンツの最小の高さに達すると、どのセクションも縮小されなくなり、ビューはスクロール可能になります。

メイン コンテンツに関しては、画面の下部にあるビューポートのメイン スクロールバーで水平方向にスクロールできますが、ヘッダーとフッターは所定の位置に留まります。

これまでのところ、ビューポート全体を埋める絶対配置のコンテナー div を介して水平方向にスクロール可能なメイン部分を実現する方法を理解しましたが、どの要素の垂直方向のサイズも把握できないようです。私が考えることができる唯一の方法は、on resize イベントにフックすることです。

4

2 に答える 2

0

あなたの問題では難しいですが、固定配置のヘッダーとフッターを使用してから、単純な水平コンテンツ div を使用します。私が作成したフィドルを参照してください

HTML

<div id="header">Header</div>
<div id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content  </div>
<div id="footer">Footer</div>

CSS

*{
    padding:0;
    margin:0;
}
html{
    overflow-y:hidden;
}
#header,#footer {
    width:100%;
    position:fixed;
    height:50px;
    left:0;
    background:#404040;
    z-index:9999;
}
#header{top:0;}
#footer{bottom:0;}
#content{
    position:absolute;
    background:gray;
    top:50px;
    left:0;
    min-width:100%;
    bottom:50px;
    float:left;
    display:block;
    width:5000px; /*your content width but 5000 for testing*/
}

ヘッダーとフッターをスケーリングする場合は、このフィドル



を使用できますCss3 の方法
新しい css3 プロパティ flex-box を使用できます。

例については、次のリンクを参照してください

フレックスボックスの詳細: Tutsplus

フレックスボックスはまさにそのトリックを行うものです

ただし、IE9 ではサポートされません...
IE10 を含むすべての新しいブラウザーでサポートされる予定です:
caniuse

于 2013-03-07T08:09:40.417 に答える
0 
<body>
  <div class="header">header</div>
  <div class="content">content



 </div>

 <div class="footer"></div>

とcss

.header, .content, .footer {
    position: absolute;
}
.header{
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #99CC00;
    left: 0;
    right: 0;
}
.content {
    top: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
    background-color: #FF6600;
}
.footer {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    background-color: #6600CC;
}

そして ダブレットの例

于 2013-03-07T06:45:19.223 に答える