1

http://jsfiddle.net/UeLMA/1/

HTML:

<div id="left" style="background: red; display: inline-block; float: left">
    aaaa<br />
    aaaaa
</div>
<div id="right" style="background: yellow; float: left"></div>

#left が使用していない画面の残りの部分を #right で埋めたい。これを達成するために、私はjqueryを使用しています:

$('#left').height($(window).height());
$('#right').height($(window).height());
$('#right').width($(window).width() - $('#left').outerWidth());

唯一の問題: 機能していません。jsfiddle は次のとおりです: http://jsfiddle.net/UeLMA/1/

何か案は？

4

5 に答える 5

1

2 つの div はウィンドウ全体を占めていないため、2 番目の div は最初の div の横に収まらない幅になっています。2 番目の幅を に変更する$('#right').parent().width() - $('#left').outerWidth()と、機能します。

ここにフィドルがあります：

http://jsfiddle.net/UeLMA/5/

私がやっていることは.parent()、ウィンドウの代わりにセレクターを使用して、divのサイズを変更しているものが実際に収まるものであることを確認することです. bodyそれらは、ウィンドウから離れたマージンまたはパディングを持つ要素に収まると思います。

于 2013-04-03T16:55:15.740 に答える
1

ボディの周りのパディングとマージンを考慮する必要があります。

http://jsfiddle.net/UeLMA/6/

CSS:

#left { background: red; display: inline-block; float: left }
#right { background: yellow; float: left; }
body {padding: 0; margin: 0;}

そして次のように変更outerWidth()しwidth()ます：

$('#left').width()
于 2013-04-03T17:01:52.593 に答える