2

ここ数日、Web サイトに必要な特定のレイアウトに関していくつかの問題がありました。レイアウトを説明する画像と、以下で試した CSS コードを追加しました。フローティング レイアウト、絶対配置、およびあらゆる種類の組み合わせを使用してレイアウトを修正しようとしましたが、うまくいかないようです。皆さんのいずれかがこれで私を助けてくれることを願っています。

レイアウトイメージは次のとおりです。

レイアウトの説明付きの画像

CSSコードは次のとおりです。

html, body {
    overflow:hidden;
}

* {
    margin:0;
    padding:0;
}

.header {
    background-color:#CCC;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:40px;
}

.wrapper {
    position:absolute;
    width:100%;
    top:40px;
    bottom:40px;
}

.left {
    float:left;
    overflow-y:scroll;
    width:30%;
    min-width:300px;
    height:100%;
}

.right {
    float:left;
    overflow-y:scroll;
    right:0;
    width:70%;
    height:100%;
}


.footer {
    background-color:#000;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    min-width:500px;
    height:40px;
}
4

2 に答える 2

3

これはあなたが望んでいたものですか？デモ

削除する

.wrapper
{
    position:absolute;
    width:100%;
    top:40px;
    bottom:40px;
}

.left
{
    float:left;
    overflow-y:scroll;
    width:30%;
    min-width:300px;
    height:100%;
}

.right
{
    float:left;
    overflow-y:scroll;
    right:0;
    width:70%;
    height:100%;
}

と置換する

div.left, 
div.right {
    display:inline;
    float: left;
    position: relative;
    height: 100%;
    overflow-y: scroll;
}

.left {
    width: 30%;
}

.right {
    width: 70%;
}

デモの更新

*
{
    margin:0;
    padding:0;
}

div.wrapper {
    width: 100%;
    min-width: 600px; /* If the window gets bellow 600px .left will stay 30% of 600 and .right will stay 70% of 600*/
}

div.left, 
div.right {
    display:inline;
    float: left;
    position: relative;
    height: 100%;
    overflow-y:scroll; 
}

.left {
    width: 30%;
    background: red;
}

.right {
    width: 70%;
    background:green;
}

.header
{
    background-color:#CCC;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:40px;
}

.wrapper
{
    position:absolute;
    width:100%;
    top:40px;
    bottom:40px;
}



.footer
{
    background-color:#000;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    min-width:500px;
    height:40px;
}​​​
于 2012-11-27T19:26:37.233 に答える