3

まだ修正できない問題が発生しました。次を見ると：http：//jsfiddle.net/WnmLc/2/

<div id="top">top</div>
<div id="bottom">
    <div id="left">left</div>
    <div id="right">
        <div id="head">head</div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</div>​

これは私がこれまでに得たものです：

#top
{
    height: 50px;
}
#bottom
{
    position: absolute;
    top: 50px;
    bottom: 0;
}
#left
{
    float: left;
    height: 100%;
    width: 100px;
}
#right
{  
    float: left;
    height: 100%;
}
#content
{
    height: 100%;
    overflow: auto;
}
​

#rightで使用可能なすべてのスペースを右側に配置し、フッターを#rightの範囲内に配置します。これ自体は#bottomを超えてはなりません。#contentは任意のサイズにすることができ、必要に応じてスクロールバーを表示する必要があります。つまり、＃headと#footerは固定位置にある必要があります。#rightの上部/下部。

私はcssよりもjavascriptに精通しているので、ここでいくつかのポインターを使用できます:)

前もって感謝します！

4

3 に答える 3

1

#leftとのパーセンテージを調整できます#right。合計する限り100%、これは機能します。同じことが、、、#headおよびに#contentも当てはまり#footerます。コンテンツをもっと大きくしたいと思うので、それを設定し80%ます。

#bottom {
width: 100%;
}

#left {
width: 20%;
}

#right {
width: 80%; 
}

#head, #footer {
height: 10%;
}

#content {
height: 80%;
}

ここでフィドルを参照してください：http：//jsfiddle.net/WnmLc/4/

編集：

の手動幅を設定する場合は、テーブル、およびテーブルセルの両方#leftを作成することでこれを修正できます。次に、外側のdiv（テーブル）をラップして、内側のコンテンツをテーブル行として表示できるようにする必要があります。オーバーフローを回避するためにに移動する必要があります。ただし、テーブルの使用はお勧めしません...テーブルは古く、特定のブラウザではサポートされていません。#bottom#left#right#right#top#bottom

フィドルを参照してください：http：//jsfiddle.net/WnmLc/8/

于 2012-12-24T09:51:19.513 に答える
0

こんにちは私はフィドルでこのコードを使用しましたuもそこで試すことができます

    div
{
    border: 1px solid red;
}
#top
{
    height: 50px;
}
#bottom
{
    position: absolute;
    top: 50px;
    width:100%;
    bottom: 0;
}
#left
{
    float: left;
    height: 100%;
    width: 10%;
}
#right
{  
    float: left;
    width:89%;
    height: 100%;

}
#content
{
    height: 87%;    
    overflow: auto;
}
​
于 2012-12-24T10:09:00.197 に答える
0

ミシェルによって提案されたテーブルオプションはフィドルでうまく機能しましたが、データが#topセクションに入力されたときの列スパンに関するいくつかの深刻な問題があることが判明しました。

テーブルスタイルのコードなしでcssを使用して動作させることができました。例は、http： //jsfiddle.net/WnmLc/11/にあります。

html：

<div id="top">top</div>
<div id="left">left</div>
<div id="head">head</div>
<div id="content">
    <div id="scroll">content</div>
</div>
<div id="footer">footer</div>

css：

div
{
    position: absolute;
    box-shadow: inset 0 0px 3px red;
}
#top
{
    left: 0;
    top: 0;
    right: 0;
    height: 50pt;
}
#left
{
    left: 0;
    top: 50pt;
    width: 100pt;
    bottom: 0;
}
#head, #footer
{
    height: 12pt;
}
#head
{
    top: 50pt;
    left: 100pt;
    right: 0;
}
#footer
{
    bottom: 0;
    left: 100pt;
    right: 0;
}
#content
{
    top: 62pt;
    left: 100pt;
    right: 0;
    bottom: 12pt;
}
#scroll
{
    width: 100%;
    height: 100%;
    overflow: auto;
}
​
于 2012-12-24T12:33:19.613 に答える