Divを残りの水平方向のスペースを埋めるにはどうすればいいですか？
ページの左側に1つ、右側に1つ、合計2つのdivがあります。左側のものは固定幅で、右側のものは残りのスペースを埋めるようにしたいのです。
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>これであなたの目的は達成されたようです。
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>私がBoushleyの答えで見つけた問題は、もし右のコラムが左より長いなら、それは単に左を包み込み、全空間を埋め尽くすということです。これは私が探していた行動ではありません。たくさんの '解決策'を調べた後、私はこれを見つけました 素晴らしいチュートリアル 3つのコラムページを作成すること。
著者は3つの異なる方法を提供します。1つは固定幅、3つは可変列、もう1つは固定外側列と可変幅中央です。私が見つけた他の例よりもはるかにエレガントで効果的です。 CSSレイアウトについての私の理解を著しく向上させました。
基本的に、上記の単純なケースでは、最初の列を左にフロートさせて固定幅にします。次に、右側の列に最初の列より少し広い左マージンを与えます。それでおしまい。完了しました。 Ala Boushleyのコード：
これは のスタックスニペット ＆ jsFiddle のデモです。
#left {
float: left;
width: 180px;
}
#right {
margin-left: 180px;
}
/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}<div id="left"> left </div>
<div id="right"> right </div>Boushleyの例では、左の列はもう一方の列を右に持っています。左の列が終了するとすぐに右が再び全空間を埋め始めます。ここでは、右側の列が単にページ内にさらに整列し、左側の列が大きな太い余白を占めています。フローインタラクションは必要ありません。
解決策はdisplayプロパティから来ています。
基本的には、2つのdivをテーブルセルのように機能させる必要があります。そのため、float:leftを使用する代わりに、両方のdivでdisplay:table-cellを使用する必要があります。動的幅のdivでは、width:auto;も設定する必要があります。両方のdivは、display:tableプロパティを使用して100％幅のコンテナに配置する必要があります。
これがCSSです。
.container {display:table;width:100%}
#search {
width: 160px;
height: 25px;
display:table-cell;
background-color: #FFF;
}
#navigation {
width: auto;
display:table-cell;
/*background-color: url('../images/transparent.png') ;*/
background-color: #A53030;
}
*html #navigation {float:left;}
そしてHTML：
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
重要：Internet Explorerの場合は、動的幅divにfloatプロパティを指定する必要があります。そうしないと、スペースは埋められません。
これであなたの問題が解決することを願っています。あなたが望むなら、あなたは私がこれについて書いた全記事を 私のブログ で読むことができます。
これはかなり一般的な質問なので、BFCを使用したNiceのソリューションを共有したいと思います。
以下のコードペンサンプル ここ 。
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
この場合、overflow: autoはコンテキストの振る舞いを引き起こし、正しい要素を only を利用可能な残りの幅まで拡張させ、.leftが消えると自然に全幅に拡張されます。多くのUIレイアウトにとって非常に便利でクリーンなトリックですが、最初は「なぜそれが機能するのか」を理解するのが難しいかもしれません。
最近ではflexboxメソッドを使うべきです（ブラウザのプレフィックスが付いているすべてのブラウザに適応できるでしょう）。
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
詳細情報： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ /
特定のブラウザの古いバージョンとの互換性が必要ない場合（IE 10年 例えば8以下）あなたはcalc() CSS関数を使うことができます：
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
@ Boushleyの答えが最も近いものですが、指摘されていない問題が1つあります。 right divはブラウザの幅全体を占めます。内容は予想される幅になります。この問題をよく見るには
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
コンテンツは正しい場所（Firefoxの場合）にありますが、幅が正しくありません。子要素がwidthを継承し始めると（例えばwidth: 100%を持つテーブル）、それらはブラウザの幅に等しい幅を与えられ、それらがページの右側からはみ出して水平スクロールバー（Firefoxの場合）を作成します。 （クロムで）.
右の列にoverflow: hiddenを追加することで簡単にできます これを修正してください 。これにより、コンテンツとdivの両方に対して正しい幅が得られます。さらに、テーブルは正しい幅を受け取り、利用可能な残りの幅を埋めます。
私は上記の他の解決策のいくつかを試してみました、それらは特定のEdgeのケースでは十分に動作せず、それらを修正するのを正当化するには余りにも複雑になりすぎました。これはうまくいき、簡単です。
問題や懸念がある場合は、気軽に提起してください。
これは、右の列が左の列の下に入らないようにするための、受け入れられた解決策の小さな修正です。誰かがそれを知らなかった場合、width: 100%;をoverflow: hidden;に置き換えるのが難しい解決策です。
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
http://jsfiddle.net/MHeqG/2600/
[編集] 3列レイアウトの例も確認してください： http://jsfiddle.net/MHeqG/3148/
display:flexを使う
<div style="width:500px; display:flex">
<div style="width:150px; height:30px; background:red">fixed width</div>
<div style="width:100%; height:30px; background:green">remaining</div>
</div>
Boushleyの答えはフロートを使ってこれを調整するために行くための最良の方法のようです。しかし、それはその問題がないわけではありません。展開された要素内にネストされたフローティングは利用できません。それはページを壊すでしょう。
これは実際にはフローティングではなく、余白を使って固定幅のフローティングエレメントと一緒に再生するだけのものです。
そのときの問題はまさにそれです：エキスパンド要素は浮いていません。エキスパンド要素内でネストされたフローティングを試みた場合、それらの「ネストされた」フローティングアイテムは実際にはまったくネストされません。 「ネストした」フロートアイテムの下にclear: both;を貼り付けようとすると、最上位フロートもクリアされます。
次に、Boushleyのソリューションを使用するには、次のようなdivを配置する必要があることを付け加えたいと思います。fakeFloat {height：100％;}幅：100％。フロート：左。これを展開されたdiv内に直接配置します。展開されたdivの内容はすべてこのfakeFloat要素内に入ります。
そのため、この場合はテーブルを使用することをお勧めします。浮動要素は実際にはあなたが望むような拡張をするようには設計されていませんが、テーブルを使った解決策は簡単です。一般的に、テーブルではなくレイアウトにはフローティングのほうが適切であると主張されています。しかし、ここではフローティングを使用していないため、偽造しています。私の謙虚な意見です。
私は同様の問題を抱えていたので、私はここで解決策を見つけました： https://stackoverflow.com/a/16909141/3934886
解決策は、固定中心divと液体側柱のためのものです。
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
あなたが固定左の列が必要な場合は、それに応じて式を変更してください。
2つのアイテムの間にあるフレックスボックス内の残りのスペースを埋めようとしている場合は、分離したい2つのアイテムの間の空のdivに次のクラスを追加します。
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
私は左の液体に対して上記の解決策を試みましたが、固定された権利はありましたが、どれもうまくいきませんでした（私は問題が逆のためであることを知っていますが、これは関連があると思います）。これはうまくいったことです：
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}
.right {float:right; width:150px;}
<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
/ * * css * /
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
/ * * html * /
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
アイテムとコンテナーの規則
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
white-space：nowrapを使用してください。 最後の項目の文章について、それらの不要な構造化のため。
アイテムX％|明細Y％|アイテムZ％
全長は常に100％です！
もし
Item X=50%
Item Y=10%
Item z=20%
それから
明細X = 70％
アイテムXが支配的です（最初のアイテムはテーブルCSSレイアウトで支配的です）。
max-contentを試してください。 divをコンテナ内に広げるための内側のdivのプロパティ：
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
私はこの問題に2日間取り組んできましたが、あなたや他の人が反応する固定幅を左にして、左側を折り返さずに残りの右側を埋めようとする人にはうまくいく解決策があります。私が想定しているのは、モバイルデバイスだけでなくブラウザでもページをレスポンシブにすることです。
これがコードです
// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps. Without this delay the right div may go off screen when browser is refreshed
setTimeout(function(){
fixRightSideWidth();
$('.right_content_container').show(600);
}, 50);
// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
fixRightSideWidth();
});
function fixRightSideWidth(){
$blockWrap = 300; // Point at which you allow the right div to drop below the top div
$normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
$('.right_content_container').width( $normalRightResize );
$('.right_content_container').css("padding-left","0px");
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
else{
if( $('.right_content_container').width() > 300 ){
$('.right_content_container').width(300);
}
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
if( $thePageRefreshed == true ){
$thePageRefreshed = false;
}
}/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
min-width: 310px;
background: #333;
min-height:100vh;
}
body{
background: #333;
background-color: #333;
color: white;
min-height:100vh;
}
.top_title{
background-color: blue;
text-align: center;
}
.bottom_content{
border: 0px;
height: 100%;
}
.left_right_container * {
position: relative;
margin: 0px;
padding: 0px;
background: #333 !important;
background-color: #333 !important;
display:inline-block;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
font-size: 14px;
font-weight: 400;
font-family: -Apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
border-radius: 0;
box-sizing: content-box;
transition: none;
}
.left_navigator_item{
display:inline-block;
margin-right: 5px;
margin-bottom: 0px !important;
width: 100%;
min-height: 20px !important;
text-align:center !important;
margin: 0px;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: top;
}
.left_navigator_items {
float: left;
width: 150px;
}
.right_content_container{
float: right;
overflow: visible!important;
width:95%; /* width don't matter jqoery overwrites on refresh */
display:none;
right:0px;
}
.span_text{
background: #eee !important;
background-color: #eee !important;
color: black !important;
padding: 5px;
margin: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
<div class="left_right_container">
<div class="left_navigator_items">
<div class="left_navigator_item">Dashboard</div>
<div class="left_navigator_item">Calendar</div>
<div class="left_navigator_item">Calendar Validator</div>
<div class="left_navigator_item">Bulletin Board Slide Editor</div>
<div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
<div class="left_navigator_item">TV Guide</div>
</div>
<div class="right_content_container">
<div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.
Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.
Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.
Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.
In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
</div>
</div>
</div>これは私のためにしたのと同じようにあなたのために働くかもしれない私のフィドルです。 https://jsfiddle.net/Larry_Robertson/62LLjapm/ /
position: absoluteとposition: relativeを一緒に使用した人は誰もいないだろうか
したがって、別の解決策は次のようになります。
_ html _
<header>
<div id="left"><input type="text"></div>
<div id="right">Menu1 Menu2 Menu3</div>
</header>
_ css _
header { position: relative; }
#left {
width: 160px;
height: 25px;
}
#right {
position: absolute;
top: 0px;
left: 160px;
right: 0px;
height: 25px;
}
あなたは、グリッドCSSプロパティを使用することができます、あなたのボックスを構成する最も明確で、きれいでそして直感的な方法です。
#container{
display: grid;
grid-template-columns: 100px auto;
color:white;
}
#fixed{
background: red;
grid-column: 1;
}
#remaining{
background: green;
grid-column: 2;
}<div id="container">
<div id="fixed">Fixed</div>
<div id="remaining">Remaining</div>
</div>私はこれのための非常に簡単な解決策を持っています！ // HTML
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
// CSS
#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}
位置relativeを追加し、右側のwidthおよびfloatプロパティを削除してから、leftおよびrightプロパティに0値を追加してください。
また、margin leftルールを追加することができます。その値は左の要素の幅に基づいています （間にスペースが必要な場合は+ピクセル） その位置を維持するために。
この例は私のために働いています：
#search {
width: 160px;
height: 25px;
float: left;
background-color: #FFF;
}
#navigation {
display: block;
position: relative;
left: 0;
right: 0;
margin: 0 0 0 166px;
background-color: #A53030;
}
私は同様の問題を抱えていて、うまくいっている以下を思いついた
CSS：
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML：
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
このメソッドはウィンドウが縮小されてもラップしませんが、 'content'領域を自動的に拡張します。サイトメニューの幅は固定されます（左）。
コンテンツボックスと左の垂直ボックス（サイトメニュー）のデモを自動拡張する場合
.container {
width:100%;
display:table;
vertical-align:middle;
}
.left {
width:100%;
display:table-cell;
text-align:center;
}
.right {
width:40px;
height:40px;
display:table-cell;
float:right;
}<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</divこれを試して。それは私のために働きました。
html table要素はデフォルトでこれを行います。テーブル幅を定義すると、カラムは常にテーブル幅全体に広がります。残りは想像力についてです