1

ここに画像の説明を入力

表を使用せずに画像に表示されているものを取得するにはどうすればよいですか? ブラウザ ウィンドウのサイズが変更された場合でも、レイアウトがページの高さ/幅全体に広がるようにします。

これは私がこれまでに試したことです。近いですが、プロフェッショナルには見えません。

<html>
<body>
    <div>
        <div style="border-style: solid; height: 20%">
            Header</div>
        <div style="overflow: hidden; height: 55%">
            <div style="border-style: solid; float: left; width: 20%; height: 100%;">
                left</div>
            <div style="border-style: solid; float: left; width: 57%; height: 100%;">
                content</div>
            <div style="border-style: solid; float: left; width: 20%; height: 100%;">
                right</div>
        </div>
        <div style="border-style: solid; height: 20%">
            Footer</div>
    </div>
</body>
</html>

クリーンでシンプルな CSS は大歓迎です。

4

4 に答える 4

5

Foo、これを試す前に、HTML と CSS の基礎をしっかりと固めておく必要があります。理想的には、インライン スタイルを避ける必要があります (例: style="border: 1px solid black;")。これを達成するために、固定または絶対配置は必要ありません。基本的な HTML/CSS のノウハウがあれば、完全に実行可能です。あなたが求めているものの代替ソリューションは次のとおりです。

<div class="header">
    <div class="header-inner"></div>       
</div>
<div class="content">
    <div class="sidebar left">
        <div class="sidebar-inner"></div>
    </div>
    <div class="content-inner"></div>
    <div class="sidebar right">
        <div class="sidebar-inner"></div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner"></div>
</div>

そしてCSS：

/* Temp styles */
.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */
.header {
    position: relative; /* needed for stacking */
    height: 100px;
    width: 100%;
}
.content {
    position: relative; /* needed for stacking */
    width: 100%;
    height: 500px;
}
.sidebar {
    position: relative; /* needed for stacking */
    width: 20%;
    height: 100%;
    border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
    clear: both;
    content: "\0020";
    display: block;
    overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
    position: relative; /* needed for stacking */
    width: 100%;
    height: 100px;
}

ここにデモがあります。このデモを見て学びましょう! お役に立てれば！

于 2013-03-26T02:42:50.477 に答える
1

position: fixed(ALL) をtop: 0px;(top div) 、right: 0px;(right div)、 left: 0px;(left div)、bottom: 0px;(bottom div)と共に使用します。

固定位置はあなたの場合に役立つはずです

編集:ここにコードが機能しています:

    <div>
        <div style="border-style: solid; height: 20%; position: fixed; top: 0px; width: 100%;">
            Header
        </div>
        <div style="overflow: hidden; height: 55%">
            <div style="border-style: solid; float: left; width: 20%; height: 60%; position: fixed; left: 0px; top: 20%;">
                left
            </div>
            <div style="border-style: solid; float: left; width: 55%; height: 60%; position: fixed; top: 20%; left: 20%;">
                content
            </div>
            <div style="border-style: solid; float: right; width: 20%; height: 60%; position: fixed; right: 0px; top: 20%;">
                right
            </div>
        </div>
        <div style="border-style: solid; height: 20%; position: fixed; bottom: 0px; width: 100%;">
            Footer
        </div>
    </div>
于 2013-03-26T02:27:38.190 に答える