0

I'm having a very hard time trying to come up with html/css for a layout to suite the following:

Layout

Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.

I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?

4

3 に答える 3

1

これにはいくつかの方法があります。これは、特に空想的ではありませんが、それを行うためのストレートな方法の1つです。

<body>
    <div id="menu">MENU</div>
    <div id="content"> content <br /> content <br /> content </div>
</body>

CSS:

div { border: 2px solid black; } /* demo purposes */

#menu {
    float: left;
    width: 150px;
}

#content {
    margin-left: 154px; /* menu width + (2 x menu.border-width) */
}

実際のサンプルについては、この jsfiddleを参照してください。

于 2012-06-05T20:52:06.767 に答える
1

このソリューションには、コンテンツ領域がその親の残りの幅の正確に 100% を占めるという追加の利点があります。

<div class="parent">
    <div class="content">blah...</div>
    <div class="left-menu">blah...</div>
</div>

CSS:

.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }

流体レイアウトに関する優れたチュートリアル: http://www.alistapart.com/articles/holygrail

IE7 以降、Safari/Chrome/Opera/Firefox で動作します...

于 2012-06-06T16:44:35.603 に答える
0

これを行う最善の方法は、既に安全に使用できると考えられている box-sizing プロパティを使用することです。

ティンカービンを見てみましょう - > http://tinkerbin.com/AcJjYk0r

それはあなたが望むように機能します。メニューの固定幅、コンテンツ領域のパーセンテージ ベースの幅。

それで...

...背景色を 2 つのボックスの間の高さの最高値まで拡大したい場合 (メニューがコンテンツ ボックスよりも高くなることがあり、その逆もあり得ることを思い出してください)、次に進む唯一の方法それは (javascript なしで) 背景画像を使用し、それを 2 つのボックスの下に配置することです。css3 グラデーション (使用しても安全) を使用すると、非常に簡単です。見てみましょう：

http://tinkerbin.com/3ETH28Oq

于 2012-06-06T18:19:13.887 に答える