it-swarm.com.de

Wie mache ich ein div, um einen verbleibenden horizontalen Raum auszufüllen?

Ich habe 2 Divs: eine auf der linken und eine auf der rechten Seite meiner Seite. Die auf der linken Seite hat eine feste Breite und ich möchte, dass die rechte Seite den verbleibenden Platz ausfüllt.

    #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>

371
alexchenco

Dies scheint zu erreichen, was Sie wollen.

#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>

59
Boushley

Das Problem, das ich mit Boushleys Antwort gefunden habe, ist, dass, wenn die rechte Spalte länger ist als die linke, sie sich nur um die linke Seite wickeln und den gesamten Raum füllen wird. Dies ist nicht das Verhalten, nach dem ich gesucht habe. Nachdem ich viele "Lösungen" durchsucht hatte, fand ich dieses tolles Tutorial zum Erstellen von drei Spaltenseiten. 

Der Autor bietet drei verschiedene Möglichkeiten an, eine feste Breite, eine mit drei variablen Spalten und eine mit festen äußeren Spalten und einer variablen Breite in der Mitte. Viel eleganter und effektiver als andere Beispiele, die ich gefunden habe. Deutlich verbesserte mein Verständnis von CSS-Layout.

Lassen Sie im ersten einfachen Fall die erste Spalte nach links und geben Sie ihr eine feste Breite. Geben Sie der rechten Spalte dann einen linken Rand, der etwas breiter als die erste Spalte ist. Das ist es. Erledigt. Ala Boushleys 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>

In Boushleys Beispiel enthält die linke Spalte die andere Spalte rechts. Sobald die linke Spalte endet, füllt die rechte den gesamten Raum wieder aus. Hier wird die rechte Spalte einfach weiter in die Seite hinein ausgerichtet und die linke Spalte nimmt ihren großen fetten Rand ein. Es sind keine Strömungsinteraktionen erforderlich. 

248
Hank

Die Lösung stammt von der Anzeigeeigenschaft.

Grundsätzlich müssen Sie die beiden Divs als Tabellenzellen fungieren lassen. Anstatt float:left zu verwenden, müssen Sie display:table-cell für beide divs verwenden. Für die dynamische Breite div müssen Sie width:auto; ebenfalls festlegen. Die beiden Divs sollten mit der display:table-Eigenschaft in einen 100% breiten Container 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 das HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

WICHTIG: Für Internet Explorer müssen Sie die Float-Eigenschaft für die dynamische Breite div angeben. Andernfalls wird der Speicherplatz nicht gefüllt.

Ich hoffe, dass dies Ihr Problem lösen wird. Wenn Sie möchten, können Sie den gesamten Artikel lesen, den ich darüber auf meinem Blog geschrieben habe.

122
Mihai Frentiu

Da dies eine sehr beliebte Frage ist, neige ich dazu, eine Lösung von Nice mit BFC zu teilen.
Codepen-Beispiel der folgenden hier .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

In diesem Fall löst overflow: auto das Kontextverhalten aus und lässt das rechte Element only auf die verfügbare verbleibende Breite erweitern. Wenn .left verschwindet, wird es natürlich auf die volle Breite erweitert. Ein sehr nützlicher und sauberer Trick für viele Benutzeroberflächen-Layouts, aber möglicherweise schwer zu verstehen, warum es funktioniert.

98
mystrdat

Heutzutage sollten Sie die flexbox-Methode verwenden (möglicherweise an alle Browser mit einem Browser-Präfix angepasst).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Weitere Informationen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

86
Jordan

Wenn Sie keine Kompatibilität mit älteren Versionen bestimmter Browser benötigen (IE 10 8 oder weniger zum Beispiel) Sie können die calc() CSS-Funktion verwenden:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
20
Marcos B.

@ Boushleys Antwort war die engste, jedoch wurde ein Problem nicht angesprochen, auf das hingewiesen wurde. Das right div nimmt die gesamte Breite des Browsers ein; Der Inhalt nimmt die erwartete Breite an. Um dieses Problem besser zu sehen:

<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>

http://jsfiddle.net/79hpS/

Der Inhalt ist an der richtigen Stelle (in Firefox), jedoch ist die Breite falsch. Wenn untergeordnete Elemente mit der Übernahme der Breite beginnen (z. B. die Tabelle mit width: 100%), erhalten sie eine Breite, die der des Browsers entspricht, wodurch sie rechts von der Seite überlaufen und eine horizontale Bildlaufleiste (in Firefox) erstellen oder nicht und nicht gedrückt werden (in chrom).

Sie können Problem beheben leicht durch Hinzufügen von overflow: hidden zur rechten Spalte. Dies gibt Ihnen die richtige Breite für den Inhalt und das div. Außerdem erhält der Tisch die korrekte Breite und füllt die verbleibende verfügbare Breite aus.

Ich habe einige der anderen Lösungen ausprobiert, sie funktionierten mit bestimmten Edge-Fällen nicht vollständig und waren zu kompliziert, um eine Behebung zu rechtfertigen. Das funktioniert und ist einfach.

Wenn es Probleme oder Bedenken gibt, können Sie diese gerne ansprechen.

15
Denzel

Hier ist ein kleiner Fix für akzeptierte Lösungen, der verhindert, dass die rechte Spalte unter die linke Spalte fällt. width: 100%; wurde durch overflow: hidden; ersetzt, eine knifflige Lösung, wenn jemand es nicht wusste.

<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/

[edit] Überprüfen Sie auch ein Beispiel für das dreispaltige Layout: http://jsfiddle.net/MHeqG/3148/

12

Verwenden Sie 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>
3
Ildar Zaripov

Boushleys Antwort scheint der beste Weg zu sein, um dies mit Hilfe von Schwimmern zu arrangieren. Es ist jedoch nicht ohne Probleme. Verschachteltes Floating innerhalb des erweiterten Elements steht Ihnen nicht zur Verfügung. Es wird die Seite zerbrechen.

Die gezeigte Methode "fälscht es", wenn es um das Erweiterungselement geht - es ist nicht wirklich schwebend, es spielt nur mit den feststehenden Breitenelementen mit ihren Rändern mit.

Das Problem ist also genau das: Das expandierende Element wird nicht verschoben. Wenn Sie versuchen, verschachtelte Elemente innerhalb des expandierenden Elements zu verschieben, werden diese "verschachtelten" Elemente nicht wirklich verschachtelt. Wenn Sie versuchen, einen clear: both; unter Ihren "verschachtelten" Float-Elementen zu platzieren, werden Sie auch die Floats der obersten Ebene löschen.

Um Boushleys Lösung zu verwenden, möchte ich hinzufügen, dass Sie ein Div wie folgt einfügen sollten: .fakeFloat { Höhe: 100%; Breite: 100%; Schwimmer: links; } und platziere dies direkt im erweiterten div; Der gesamte Inhalt des erweiterten div sollte dann in dieses fakeFloat-Element gehen.

Aus diesem Grund empfehle ich in diesem speziellen Fall die Verwendung von Tabellen. Float-Elemente sind wirklich nicht für die gewünschte Erweiterung ausgelegt, während die Lösung mit einer Tabelle trivial ist. Im Allgemeinen wird argumentiert, dass Floating für Layouts geeigneter ist, nicht für Tabellen. Sie verwenden das Floating hier jedoch nicht, Sie täuschen es vor meine bescheidene Meinung.

3
chinchi11a

Ich hatte ein ähnliches Problem und fand die Lösung hier: https://stackoverflow.com/a/16909141/3934886

Die Lösung ist für eine feste Mitteldifferenz und Flüssigkeitsseitenkolonnen.

.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 wünschen, ändern Sie einfach die Formel entsprechend.

3
alex351

Wenn Sie versuchen, den verbleibenden Speicherplatz in einer Flexbox zwischen zwei Elementen zu füllen, fügen Sie die folgende Klasse zu einem leeren Div zwischen den beiden hinzu, die Sie trennen möchten:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}
3
Helzgate

Ich habe die obigen Lösungen für eine flüssige Linke ausprobiert, und eine feste Rechte, aber keine von ihnen hat funktioniert (ich weiß, dass die Frage umgekehrt ist, aber ich denke, das ist relevant). Folgendes 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>
3
Dominic

/* * 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>
0
user1700099

Regeln für Gegenstände und Behälter;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Verwenden Sie Leerraum: Nowrap; für Texte in den letzten Punkten für ihre Unterzerstörung.

Punkt X% | Position Y% | Artikel Z%

Gesamtlänge immer = 100%!

ob

Item X=50%
Item Y=10%
Item z=20%

dann 

Punkt X = 70%

Element X ist dominant (erste Elemente dominieren im CSS-Layout von Tabellen)!

Probiere max-content; property für div innen zum Ausbreiten von div in container:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

0

Ich arbeite seit zwei Tagen an diesem Problem und habe eine Lösung, die für Sie und jeden anderen, der versucht, eine reaktionsfähige feste Breite links und rechts zu erzeugen, funktionieren kann, ohne den Rest des Bildschirms um die linke Seite zu wickeln. Ich gehe davon aus, dass die Seite sowohl in Browsern als auch auf Mobilgeräten ansprechbar sein soll.

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()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'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()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'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 vielleicht genauso für Sie wie für mich funktioniert. https://jsfiddle.net/Larry_Robertson/62LLjapm/

0
Larry Robertson

Ich frage mich, dass niemand position: absolute mit position: relative verwendet hat.

Eine andere Lösung wäre also:

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;
}

Jsfiddle Beispiel

0
Buksy

Sie können die Raster-CSS-Eigenschaften verwenden. Dies ist die klarste, sauberste und intuitivste Art, Ihre Boxen zu strukturieren. 

#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>

0
colxi

Ich habe eine sehr einfache Lösung dafür! // 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;}

Link: http://jsfiddle.net/MHeqG/

0
iamatsundere181

Fügen Sie die Position relative hinzu, entfernen Sie die Eigenschaften width und float auf der rechten Seite. Fügen Sie dann die Eigenschaften left und right mit dem Wert 0 hinzu.

Sie können auch eine margin left-Regel hinzufügen. Der Wert basiert auf der Breite des linken Elements (+ einige Pixel, wenn Sie Platz dazwischen benötigen) , um seine Position zu erhalten.

Dieses Beispiel funktioniert 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;
    }
0
KeepMove

Ich hatte ein ähnliches Problem und kam zu folgendem auf, das gut funktionierte

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 umbrochen, wenn das Fenster verkleinert wird. Der Bereich "Inhalt" wird jedoch automatisch erweitert. Es behält eine statische Breite für das Site-Menü (links) bei.

Und zum automatischen Erweitern der Inhaltsbox und der linken vertikalen Box (Site-Menü) Demo:

https://jsfiddle.net/tidan/332a6qte/

0
Tidan

.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

Versuche dies. Es hat für mich funktioniert.

0
Spoorthi

das html-Tabellenelement macht dies standardmäßig ... Sie definieren die Tabellenbreite, dann erstrecken sich die Spalten immer über die gesamte Tabellenbreite. Beim Rest geht es um Fantasie

0
Botea Florin