0

これまでに見たことのない独特のレイアウトの css を作成する方法を見つけようとしています。下の画像には、セクションが含まれています。ガイダンス:

  • セクション「1」はヘッダーで、アルファ ゾーン内で修正する必要があります
  • セクション「2」は、高すぎる場合にスクロールバーが必要なdivです（ビューポート/ウィンドウの高さによって決まります）
  • セクション「3」はフッターで、アルファゾーン内に固定する必要があります
  • セクション「4」は、iframe を持つ右側の流体コンテナです。iframe 自体がスクロールを管理します。

何かご意見は？

ここに画像の説明を入力

現時点での私のコードはすべての場所のようなものですが、これは私がどれだけ近づいたかの要点です:

CSS:
.controller {
    width: 400px;
    height: 100%;
}
.controller header {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    width: 400px;
}
.controller footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 400px;
}
.controller .body {
    overflow: scroll;
}
.focus {
    float: left;
    width: 100%;
}

Markup:

<div class="wrapper">
    <div class="container">
        <header></header>
        <div class="body">
        <footer></footer>
    </div>
    <div class="focus">
    </div>
</div>
4

1 に答える 1

1

これを実現する方法についての jsFiddleのデモを次に示します。

私が使ったスタイルは

body, html {
    padding:0;
    margin:0;
}
.container {
    width: 25%;
    height: 100%;
    float:left;
    position:absolute;
}
.container header {
    display:block;
    height: 10%;
    width:100%;
    background-color:#ff5;
}
.container .body {
    position: relative;
    overflow: auto;
    width: 100%;
    height:80%;
    background-color:#f5f;
}
.container footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 25%;
    background-color:#5ff;
}
.focus {
    background-color:#ddd;
    position: fixed;
    left: 25%;
    width:75%;
    height: 100%;
    overflow:auto;
}
.focus iframe{
    width:99%;
    height: 99%;
}

これがお役に立てば幸いです。

于 2013-02-28T05:54:06.017 に答える