Wie macht man ein div einen verbleibenden horizontalen Raum füllen?
https://stackoverflow.com/questions/1032914
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe 2 Divs: ein auf der linken Seite und eine auf der rechten Seite von meiner Seite. Die in der linken Seite hat eine feste Breite und ich mag den einen der rechten Seite den verbleibenden Platz zu füllen.
#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>
Lösung
Dies scheint zu erreichen, was für Sie gehen.
#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>
Andere Tipps
Das Problem, das ich mit Boushley Antwort gefunden, dass, wenn die rechte Spalte länger als die linken Seite ist, wird es wickelt nur um die linken und wieder den ganzen Raum zu füllen. Dies ist nicht das Verhalten, das ich suchte. Nach der Suche durch viele ‚Lösungen‘ Ich fand dieses ehrfürchtige Tutorial auf die Schaffung von drei Spalte Seiten.
Die drei verschiedene Arten des Autors Angebot, eine feste Breite, eine mit drei variablen Spalten und eine mit festen äußeren Spalten und eine variable Breite Mitte. Viele elegant und effektiver als andere Beispiele, die ich gefunden. mein Verständnis von CSS-Layout deutlich verbessert werden.
Im Wesentlichen in dem einfachen Fall, der oben schweben die erste Spalte links und gibt ihm eine feste Breite. Dann geben der Spalte auf der rechten Seite eine links Marge, die ein wenig breiter als die erste Spalte ist. Das ist es. Getan. Ala Boushley Code:
Hier ist eine Demo in Stack-Snippets & 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>
Mit Boushley dem Beispiel der linke Spalte enthält die andere Spalte rechts. Sobald die linke Spalte endet beginnt das Recht wieder den ganzen Raum zu füllen. Hier ist die rechte Spalte richtet einfach weiter in die Seite und die linke Spalte nimmt es große Fettrand. Keine Strömung Interaktionen erforderlich.
Die Lösung kommt von der Anzeigeeigenschaft.
Im Grunde müssen Sie die beiden divs wie Tabellenzellen wirken lassen. Anstatt also float:left verwenden, werden Sie display:table-cell auf beiden divs verwenden müssen, und für die dynamische Breite div müssen Sie width:auto; auch vortragen. Die beiden divs sollten in eine Breite von 100% Behälter mit der display:table Eigenschaft platziert werden.
Hier ist die 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;}
Und die HTML:
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
WICHTIG: Für Internet Explorer müssen Sie die Eigenschaft float auf die dynamische Breite div angeben, da sonst der Raum wird nicht neu besetzt
.Ich hoffe, dass dies Ihr Problem lösen wird. Wenn Sie möchten, können Sie den ganzen Artikel las ich über diese auf mein Blog .
Da dies eine ziemlich beliebte Frage ist, ich bin geneigt, eine schöne Lösung mit BFC zu teilen.
Codepen Probe der folgenden hier .
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
In diesem Fall overflow: auto löst Kontext Verhalten und macht das richtige Element erweitern nur zur Verfügung Restbreite, und es wird natürlich auf volle Breite erweitern, wenn .left verschwindet. Ein sehr nützlicher und sauberer Trick für viel UI-Layout, aber vielleicht schwer zu verstehen, das „Warum es funktioniert“ an erster Stelle.
In diesen Tagen sollten Sie die flexbox Methode verwenden (mit einem Browser-Präfix zu allen Browsern angepasst werden).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
Mehr Infos: https://css-tricks.com/ Schnipsel / css / a-guide-to-Flexbox /
Wenn Sie nicht brauchen, die Kompatibilität mit älteren Versionen von bestimmten Browsern (IE 10 8 oder weniger zum Beispiel) können Sie die calc() CSS-Funktion verwenden können:
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
@ Boushley Antwort war in der Nähe, aber es gibt ein Problem nicht angegangen, die darauf hingewiesen worden ist. Die rechts div nimmt die gesamte Breite des Browsers; Der Gehalt nimmt die erwartete Breite. Um dieses Problem zu sehen, besser:
<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>
Der Inhalt an der richtigen Stelle ist (in Firefox), aber die Breite nicht korrekt. Wenn Kind Elemente Breite beginnen vererben (zB die Tabelle mit width: 100%) sie eine Breite gleich derjenigen des Browsers gegeben wodurch sie das Recht auf der Seite zum Überlauf aus und erstellen schweben einen horizontalen Scrollbalken (in Firefox) oder nicht und nach unten gedrückt werden, (in Chrom).
Sie können dieses Problem beheben leicht durch overflow: hidden in den rechten Spalt hinzufügen. Dies gibt Ihnen die richtige Breite sowohl für den Inhalt und die div. Darüber hinaus wird die Tabelle, um die richtige Breite erhalten und die verbleibende Breite zur Verfügung füllen.
Ich habe versucht, einige der anderen oben genannten Lösungen, sie nicht vollständig mit Fällen bestimmte Kante funktionierte und waren einfach zu verworren Aufhängevorrichtungen zu rechtfertigen. Dies funktioniert und es ist einfach.
Wenn es irgendwelche Probleme oder Bedenken sind, fühlen sich frei, um sie zu erhöhen.
Hier ist ein kleines Update für akzeptierte Lösung, die von fallenden unter der linken Spalte rechte Spalte verhindert. Ersetzt width: 100%; mit overflow: hidden; einer kniffligen Lösung, wenn jemand es nicht kennen.
<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/
[Bearbeiten] Auch ein Beispiel für drei Spalten-Layout überprüfen: http://jsfiddle.net/MHeqG/3148/
Verwenden 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 Antwort scheint der beste Weg, um zu gehen, um dies mit Schwimmern zu arrangieren. Es ist jedoch nicht ohne Probleme. Verschachtelte innerhalb des erweiterten Elements Floating wird nicht zur Verfügung stehen; es wird die Seite brechen.
Das gezeigte Verfahren im Grunde genommen „täuscht es“, wenn es um das expandierende Element kommt -. Es eigentlich nicht schwimmt, es spielt nur zusammen mit der festen Breite Elemente schwebte die Margen mit
Das Problem ist dann genau das: das Spreizelement nicht schwebt. Wenn Sie versuchen, und innerhalb des Spreizelementes alle verschachtelten Floating haben, jene „verschachtelte“ schwebte Elemente sind nicht wirklich überhaupt verschachtelt; wenn Sie versuchen, eine clear: both; unter Ihrem „verschachtelten“ Stick Artikel schwebte, werden Sie die Top-Level-Schwimmer als auch am Ende löschen.
Dann Boushley-Lösung zu verwenden, würde ich hinzufügen, dass Sie wie die folgenden ein div legen sollte: .fakeFloat { Höhe: 100%; Breite: 100%; float: left; } und legen Sie diese direkt innerhalb des erweiterten div; Der gesamte Inhalt des erweiterten div dann innerhalb dieses fakeFloat Element gehen sollte.
Aus diesem Grunde würde ich die Verwendung von Tabellen in diesem speziellen Fall empfehlen. Floats wirklich nicht entwickelt, um die Erweiterung zu tun, die Sie mögen, dass, während die Lösung unter Verwendung einer Tabelle trivial ist. Ein Argument ist in der Regel gemacht, dass Floating für Layouts mehr richtig ist, nicht Tabellen .. aber Sie verwenden hier nicht sowieso schwimmen, Sie fälschen es - und diese Art von Niederlagen der Zweck der stilistischen Argument für diesen speziellen Fall, in meine bescheidene Meinung nach.
habe ich versucht, die oben genannten Lösungen für eine Flüssigkeit links und rechts eine feste, aber nicht von ihnen arbeitete (ich bin mir bewusst, die Frage nach der Rückseite ist, aber ich denke, das ist relevant). Hier ist, was hat funktioniert:
.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>
Ich hatte ein ähnliches Problem und ich fand hier die Lösung: https://stackoverflow.com/a/16909141/3934886
Die Lösung ist für eine feste Mitte div und Flüssigkeitsseite Spalten.
.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;
}
Wenn Sie eine feste linke Spalte wollen, nur die Formel entsprechend ändern.
Wenn Sie versuchen, in einem Flexbox zwischen 2 Artikel verbleibenden Raum zu füllen, fügen Sie die folgende Klasse in eine ein leeres div zwischen 2 Sie trennen wollen:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Sie die Grid CSS-Eigenschaften verwenden können, ist die klare, saubere und intuitive Art und Weise Struktur Ihrer Boxen.
#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>
Ich frage mich, dass niemand verwendet position: absolute mit position: relative
So wäre eine andere Lösung sein:
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 * /
#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>
Ich habe eine sehr einfache Lösung für diese! // 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;}
Ich hatte ein ähnliches Problem und kam mit dem Follow-up, die gut funktioniert
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>
Diese Methode wird nicht umgebrochen, wenn das Fenster schrumpft jedoch den ‚Inhalt‘ Bereich Auto erweitern. Es wird eine statische Breite für das Site-Menü halten (links).
Und für die automatische Erweiterung Content-Box und linke vertikale Box (Seite Menü) Demo:
Versuchen Position relative Hinzufügen width und float Eigenschaften der rechten Seite entfernen, dann left und right Eigenschaft mit 0 Wert.
Sie können aber auch margin left Regel hinzufügen, mit dem Wert auf das linke Elemente der Breite basieren (+ einige Pixel, wenn Sie brauchen Platz dazwischen) seine Position zu halten.
Dieses Beispiel arbeitet für mich:
#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;
}
.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
Versuchen Sie dies. Er arbeitete für mich.
Ich habe für zwei Tage an diesem Problem gearbeitet und eine Lösung, die versuchen, für Sie und alle anderen arbeiten kann eine reaktions Feste Breite links zu machen und haben die rechte Seite in den Rest des Bildschirms zu füllen, ohne um die linke Einwickeln Seite. Die Absicht Ich gehe davon ist die Seite reagiert, in Browsern und mobilen Geräten zu machen.
Hier ist der Code
// 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>
Hier ist meine Geige, die nur für Sie arbeiten kann, wie es für mich getan hat. https://jsfiddle.net/Larry_Robertson/62LLjapm/
html Tabellenelement macht dies standardmäßig ... Sie definieren Tabellenbreite dann werden die Spalten immer gesamte Tischbreite erstrecken. Der Rest ist über Phantasie
Regeln für Elemente und Container;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
Mit white-space: nowrap; für Texte in der letzten Artikel für ihr undestructuring
.Element X% | Artikel Y% | Artikel Z%
Gesamtlänge immer = 100%!
, wenn
Item X=50%
Item Y=10%
Item z=20%
dann
Element X = 70%
Item X dominant ist (erster Artikel dominant ist in Tabelle CSS-Layout)!
Versuchen Sie Max-Gehalt; Eigenschaft für div innen für div in Behälter Verbreitung:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
Ich lief in das gleiche Problem versucht, einige jQueryUI Kontrollen Layout. Obwohl die gemeinsame Philosophie jetzt „Verwendung DIV statt TABLE“ ist, fand ich in meinem Fall mit TABLE arbeitete viel besser. Insbesondere wenn Sie einfache, intuitive Bedienung für diese einfache Ausrichtung innerhalb der beiden Elemente (beispielsweise vertikale Zentrierung, horizontale Zentrierung, etc.) die Optionen geben, mit Tabelle zur Verfügung haben müssen.
Hier ist meine Lösung:
<html>
<head>
<title>Sample solution for fixed left, variable right layout</title>
<style type="text/css">
#controls {
width: 100%;
}
#RightSide {
background-color:green;
}
</style>
</head>
<body>
<div id="controls">
<table border="0" cellspacing="2" cellpadding="0">
<TR>
<TD>
<button>
FixedWidth
</button>
</TD>
<TD width="99%" ALIGN="CENTER">
<div id="RightSide">Right</div>
</TD>
</TR>
</table>
</div>
</body>
</html>
neu zu CSS. Aber ich löste dieses Problem durch Inline-Block verwenden. Check this out: http://learnlayout.com/inline-block.html
