0

HTMLでヘッダーサイドメインフッターレイアウトをどのように作成するのか知りたいです。

このような：

<html>
  <div class="header"></div>
  <div class="content">
    <div class="side"></div>
    <div class="main"></div>
  </div>
  <div class="footer"></div>
</html>

div.headerと の高div.footerさは固定です。そして、div.content残りの高さはすべて保持され、本体のスクロールバーはありません。

にdiv.sideは固定幅がありdiv.main、残りの幅はすべて保持されます。

にはdiv.sidey スクロール バーを含めることができます。

ウィンドウのサイズが変更div.contentされると、高さを固定するために拡大され、スクロール バーは表示されません。

ところで、 と は次のように位置を交換することがありますdiv.side。div.main

<html>
  <div class="header"></div>
  <div class="content">
    <div class="main"></div>
    <div class="side"></div>
  </div>
  <div class="footer"></div>
</html>

どうやって作るの？

アップデート：

div.main はマップを作成するために使用するコンテナーであるため、overflow:hidden として作成することはできません。

var map=new google.maps.Map('main',{});
4

2 に答える 2

0

それが私がhtmlでそれを行う方法です、まあ私はそれの周りにラッパーを追加してセンタリングを簡単にします、しかしそれは私だけです。私はあなたがcssについて知りたいと思うと思います、そして研ぎ澄まされるために、それについて行くかもしれない多くの方法があるでしょう、単純なものは次のとおりです：

.header {
    width:whateverpx;
    margin:0 auto;
}
.content {
    width:100%;
    position:relative;
}
.content:after {
    clear:both;
    content:"";
    display:none;
}
.side {
    float:left;
    position:relative;
    width: your width for it;
}
.main {
    float:left;
    position:relative;
}
.footer {
    height: whateverpx;
    width: whateverpx;
    margin:0 auto;
}

また、コンテンツを中央に配置する場合は、その周りにラッパーを追加して追加します

.wrapper {
    width:whatever;
    marging:0 auto;
}

また

ラッパーはありません。代わりに.contentに対してこれを実行してください

.content {
    width: whatever
    margin:0 auto;
    position:relative;
}
于 2012-10-29T13:57:43.283 に答える
0

高div.sideさと幅を指定してから、次のoverflow:scroll ようにします。

div.side{
height:60%;
width: 60%;
overflow: scroll;
}

とdiv.content overflow:hidden

于 2012-10-29T13:54:49.170 に答える