30

私には2つの<div>要素があります。現在、私の簡略化された .css は次のとおりです。

#leftdiv {
    /*this is the navigation pane*/
    min-height: 600px;
    max-height: 600px;
}
#rightdiv {
    /*this is the primary pane*/
    min-height: 600px;
    max-height: 600px;
    overflow-y: auto;
}

両方の高さの最小値と最大値を厳密に設定して、同じ高さを維持し、コンテンツが からはみ出すと#rightdivスクロールバーが表示されるようにしました。#rightdivこのスクロールバーをなくして、 の内容に合わせてと を#leftdiv伸ばすようにしたいと思い#rightdivます。コンテンツに合わせてサイト全体を高さ方向に伸ばしたいのですがoverflow-y: auto;、.css から を削除して最大高さを削除すると、#rightdiv伸びますが、伸び#leftdivず、本当に醜いデザインになります。

以下のようなものが欲しいです。

#leftdiv {
    min-height: equal to #rightdiv height if #rightdiv is taller, else 600px;
}
#rightdiv {
    min-height: equal to #leftdiv height if #leftdiv is taller, else 600px;
}

このように両方の最小高さを設定するにはどうすればよいですか?

4

5 に答える 5

3

If you're open to using javascript then you can get the property on an element like this: document.GetElementByID('rightdiv').style.getPropertyValue('max-height');

And you can set the attribute on an element like this: .setAttribute('style','max-height:'+heightVariable+';');

Note: if you're simply looking to set both element's max-height property in one line, you can do so like this:

#leftdiv,#rightdiv
{
    min-height: 600px;   
}
于 2013-10-21T00:40:20.897 に答える
1

プロジェクトにレスポンシブ フレームワークを使用すると、確かにメリットがあります。頭痛のかなりの量を節約できます。ただし、HTML の構造を確認すると、次のようになります。

例を確認してください: http://jsfiddle.net/xLA4q/

HTML:

<div class="nav-content-wrapper">
 <div class="left-nav">asdasdasd ads asd ads asd ad asdasd ad ad a ad</div>
 <div class="content">asd as dad ads ads ads ad ads das ad sad</div>
</div>

CSS:

.nav-content-wrapper{position:relative; overflow:auto; display:block;height:300px;}
.left-nav{float:left;width:30%;height:inherit;}
.content{float:left;width:70%;height:inherit;}
于 2013-10-21T00:43:36.670 に答える
1

あなたが探しているのはCSS Holy Grail Layoutのバリアントのようですが、2 列になっています。詳細については、この回答のリソースを確認してください。

于 2013-10-21T00:47:35.943 に答える