Wie kann ein Div einen verbleibenden horizontalen Raum füllen?

419

Ich habe 2 Divs: einen auf der linken Seite und einen auf der rechten Seite meiner Seite. Der auf der linken Seite hat eine feste Breite und ich möchte, dass der auf der rechten Seite den verbleibenden Raum 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>

alexchenco
quelle
11
Entfernen Sie die Eigenschaft width und float in der #navigation, und es wird funktionieren.
Johan Leino
1
@alexchenco: Vielleicht möchten Sie Ihre gewählte Antwort auf die von Hank
Adrien Be
@AdrienBe eigentlich, wenn Sie sich die Antwort von mystrdat ansehen, denke ich, dass eine noch besser ist. Es ist nur eine Zeile von CSS und es ist die einzige, die für mich funktioniert hat (ich mache drei Spalten mit float: left; auf den ersten beiden mit festen Breiten und Überlauf: auto auf der letzten und es funktioniert großartig)
edwardtyl
@ Edwardtyl fair genug. Tatsächlich scheint es eine ähnliche Technik zu verwenden wie die Antwort, die ich für stackoverflow.com/questions/4873832/… gegeben habe
Adrien Be

Antworten:

71

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>

Boushley
quelle
8
Sie müssen die Breite entfernen: 100% auf der rechten Seite, damit es funktioniert.
Johan Leino
250
Diese Lösung hat tatsächlich ein Problem. Versuchen Sie, die Farbe aus dem LEFT-Element zu entfernen. Sie werden feststellen, dass sich die Farbe des RIGHT-Elements tatsächlich darunter versteckt. Der Inhalt scheint an die richtige Stelle zu gehen, aber das RICHTIGE Div selbst ist es nicht.
Vyrotek
5
+1 Mein Problem wurde auch gelöst. Was ich gelernt habe war, dass ich "float: left" auf dem Fülldiv entfernen musste. Ich dachte, das würde die Seite implodieren lassen
Keyser
12
Vielleicht gut zu bemerken, dass Vyroteks Bemerkung wahr ist, aber mit Überlauf gelöst werden kann : versteckt in der rechten Spalte. Denzel erwähnt dies, aber seine Antwort ist nicht die akzeptierte, so dass Sie das verpassen könnten ...
Ruudt
45
Dies ist eindeutig falsch, das rechte Element hat die volle Größe, nur der Inhalt wird um das linke Element verschoben. Dies ist keine Lösung, nur mehr Verwirrung.
Mystrdat
268

Das Problem, das ich bei Boushleys Antwort gefunden habe, ist, dass wenn die rechte Spalte länger als die linke ist, sie sich nur um die linke wickelt und den gesamten Raum wieder ausfüllt. Dies ist nicht das Verhalten, nach dem ich gesucht habe. Nachdem ich viele 'Lösungen' durchsucht hatte, fand ich ein Tutorial (jetzt ist der Link tot) zum Erstellen von drei Spaltenseiten.

Der Autor bietet drei verschiedene Möglichkeiten an, eine mit fester Breite, eine mit drei variablen Spalten und eine mit festen äußeren Spalten und einer Mitte mit variabler Breite. Viel eleganter und effektiver als andere Beispiele, die ich gefunden habe. Mein Verständnis des CSS-Layouts wurde erheblich verbessert.

Grundsätzlich schweben Sie im obigen 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>

Bei Boushleys Beispiel enthält die linke Spalte die andere Spalte rechts. Sobald die linke Spalte endet, füllt die rechte wieder den gesamten Raum aus. Hier wird die rechte Spalte einfach weiter in die Seite ausgerichtet und die linke Spalte nimmt den großen Fettrand ein. Keine Flusswechselwirkungen erforderlich.

Strang
quelle
Wenn Sie das div-Tag schließen, sollte der Inhalt nach diesem div in einer neuen Zeile angezeigt werden, dies geschieht jedoch nicht. Können Sie bitte erklären, warum?
Fuddin
sollte sein: Rand links: 190px; du hast vergessen ';'. Auch der linke Rand sollte 180px betragen.
Fuddin
4
Hinweis: Wenn Sie das Element mit fester Breite rechts sehen möchten, müssen Sie es zuerst im Code platzieren, da es sonst trotzdem in die nächste Zeile verschoben wird.
Trevor
2
@RoniTovi, die schwebenden Elemente sollten vor den nicht schwebenden Elementen in Ihrem HTML stehen. jsfiddle.net/CSbbM/127
Hank
6
Wie machen Sie das, wenn Sie eine feste Breite vermeiden möchten? Mit anderen Worten, lassen Sie die linke Spalte nur so breit sein, wie sie sein muss, und die rechte Spalte, um den Rest aufzunehmen?
Patrick Szalapski
126

Die Lösung stammt aus der Anzeigeeigenschaft.

Grundsätzlich müssen Sie die beiden Divs wie Tabellenzellen verhalten. Anstatt also zu verwenden float:left, müssen Sie display:table-cellbeide Divs verwenden, und für die dynamische Breite müssen Sie width:auto;auch div festlegen . Die beiden Divs sollten mit der display:tableEigenschaft in einen Container mit 100% Breite gestellt 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 der HTML:

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

WICHTIG: Für Internet Explorer müssen Sie die Eigenschaft float in der dynamischen Breite div angeben, da sonst der Speicherplatz nicht gefüllt wird.

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

Mihai Frentiu
quelle
3
Funktioniert nicht, wenn der Inhalt innerhalb des div mit width: auto größer ist als der Rest des im Ansichtsfenster verfügbaren Speicherplatzes.
Nathan Loyer
4
@einord, diese Lösung verwendet keine Tabellen, und ich bin mir bewusst, dass Tabellen nur für tabellarische Daten verwendet werden sollten. Also, ist hier aus dem Zusammenhang geraten. Tatsächliche Tabellen und Anzeige: Tabelleneigenschaften (+ andere Variationen) sind völlig andere Dinge.
Mihai Frentiu
1
@Mihai Frentiu, inwiefern unterscheidet sich display: table vom eigentlichen Tabellenelement? Ich würde das wirklich gerne lernen, wenn es ganz andere Dinge sind, danke. =)
Einord
2
@einord, die Verwendung von HTML-Tabellen impliziert die Definition der gesamten Tabellenstruktur im HTML-Code. Mit dem CSS-Tabellenmodell können Sie fast jedes Element wie ein Tabellenelement verhalten, ohne den gesamten Tabellenbaum zu definieren.
Mihai Frentiu
1
@ Mihai Frentiu, danke für die Antwort. Aber ist das Verhalten des Tabellenelements nicht die Hälfte des Problems bei der Verwendung von Tabellen als Designelemente?
Einord
123

Heutzutage sollten Sie die flexboxMethode verwenden (kann an alle Browser mit einem Browserpräfix angepasst werden).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

Jordan
quelle
Eine gute Erklärung des CSS-Attributs finden Sie unter www.w3schools.com/cssref/css3_pr_flex-grow.asp. Eine einfache moderne Lösung, die in alten Browsern möglicherweise nicht funktioniert.
Edward
4
Flexbox FTW ... Ich habe alle anderen Lösungen in diesem Thread ausprobiert, nichts funktioniert, ich probiere diese Flexbox-Lösung aus, sie funktioniert sofort ... klassisches CSS (dh vor dem Aufkommen von Flexbox und CSS-Grid) ist total schlecht im Layout ... Flex und Grid Regel :-)
Leo
Dies sollte als ausgewählte Lösung für aktuelle Zeiten akzeptiert werden. Es ist auch die einzige "nicht hackische" Lösung.
Greg
das wirkt wie ein Zauber und rettet meinen Tag!
lisnb
tsbaa (dies sollte die akzeptierte Antwort sein)
Ryo
104

Da dies eine sehr beliebte Frage ist, neige ich dazu, eine nette Lösung mit BFC zu teilen.
Codepen-Beispiel für Folgendes hier .

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

In diesem Fall wird das overflow: autoKontextverhalten ausgelöst und das richtige Element wird nur auf die verfügbare verbleibende Breite erweitert. Wenn es .leftverschwindet, wird es natürlich auf die volle Breite erweitert . Ein sehr nützlicher und sauberer Trick für viele UI-Layouts, aber vielleicht schwer zu verstehen, warum es zuerst funktioniert.

mystrdat
quelle
1
Browserunterstützung für Überlauf. IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
Jewgenij Afanasjew
1
Manchmal habe ich eine nutzlose horizontale Bildlaufleiste auf dem .right-Element. Was ist das Problem dort?
Patrick Szalapski
1
@PatrickSzalapski Kannst du einen Codepen oder ähnliches aus dem Fall machen? Ein Überlauf autokann dies je nach Inhalt auslösen. Sie können auch einen anderen Überlaufwert verwenden, um den gleichen Effekt zu erzielen. hiddenDies funktioniert möglicherweise besser für Ihren Fall.
Mystrdat
1
Wofür steht BFC und gibt es ein gutes allgemeines Tutorial, das BFC im Web erklärt?
Lulalala
1
@lulalala steht für Blockformatierungskontext . Hier ist eine gründlichere Erklärung
Bobo
23

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

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

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
Marcos B.
quelle
1
IE 9 und höher unterstützen das Calc-Attribut. Das einzige Problem bei dieser Lösung ist, dass wir möglicherweise die Breite der linken Spalte nicht kennen oder sie sich ändert.
Arashsoft
Nun, diese Lösung ist möglicherweise auf einen flexiblen Fall ausgerichtet und setzt voraus, dass Sie die Breite des übergeordneten Containers nicht kennen oder sich nicht darum kümmern. In der Frage @alexchenco sagte, dass er "den verbleibenden Platz" füllen wollte, also ... ich denke ist gültig :) und ja, IE 9 wird auch unterstützt, danke für den Hinweis;)
Marcos B.
15

@ Boushleys Antwort war die nächste, es gibt jedoch ein Problem, das nicht angesprochen wurde und auf das hingewiesen wurde. Das rechte 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 befindet sich an der richtigen Stelle (in Firefox), die Breite ist jedoch falsch. Wenn untergeordnete Elemente die Breite erben (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 schweben und nach unten gedrückt werden ( in Chrom).

Sie können dies einfach beheben, indem Sie overflow: hiddenzur rechten Spalte hinzufügen . Dies gibt Ihnen die richtige Breite sowohl für den Inhalt als auch für das div. Darüber hinaus erhält die Tabelle die richtige Breite und füllt die verbleibende verfügbare Breite aus.

Ich habe einige der anderen oben genannten Lösungen ausprobiert, sie funktionierten bei bestimmten Randfällen nicht vollständig und waren einfach zu kompliziert, um eine Behebung zu rechtfertigen. Das funktioniert und ist einfach.

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

Denzel
quelle
1
overflow: hiddenin der Tat behebt dies, danke. (Die markierte Antwort ist übrigens falsch, da righttatsächlich der gesamte verfügbare Speicherplatz auf dem übergeordneten Element belegt ist. Sie können dies in allen Browsern sehen, wenn Sie Elemente
überprüfen.
1
Kann jemand erklären, warum das genau funktioniert? Ich weiß, dass ich hier irgendwo eine gute Erklärung gesehen habe, aber ich kann sie scheinbar nicht finden.
Tomswift
2
@tomswift Setting overflow: hiddenversetzt die rechte Spalte in einen eigenen Blockformatierungskontext. Blockelemente nehmen den gesamten ihnen zur Verfügung stehenden horizontalen Raum ein. Siehe: developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
John Kurlak
Das overflow:xxxAttribut ist der Schlüssel. Wie Sie sagen, hört es auf #right, sich darunter auszudehnen #left. Es löst sehr ordentlich ein Problem, bei dem ich die Größe der jQuery-Benutzeroberfläche geändert habe. Wenn Sie die Größe #rightmit einem Überlaufattribut #leftfestlegen und die Größe ändern, haben Sie eine einfache bewegliche Grenze. Siehe jsfiddle.net/kmbro/khr77h0t .
kbro
13

Hier ist eine kleine Korrektur für die akzeptierte Lösung, die verhindert, dass die rechte Spalte unter die linke Spalte fällt. Ersetzt width: 100%;durch overflow: hidden;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/

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

Dariusz Sikorski
quelle
1
Perfekte Lösung für flexible Navigationsleisten mit festem Logo.
Trunk
5

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

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

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>
Ildar Zaripov
quelle
1
Diese Antwort dupliziert Jordans Antwort von 2014.
TylerH
3

Boushleys Antwort scheint der beste Weg zu sein, um dies mit 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 brechen.

Die gezeigte Methode "fälscht es", wenn es um das expandierende Element geht - es schwebt nicht wirklich, es spielt nur mit den schwebenden Elementen mit fester Breite zusammen, indem es seine Ränder verwendet.

Das Problem ist dann genau das: Das expandierende Element wird nicht schwebend. Wenn Sie versuchen, ein verschachteltes Floating innerhalb des expandierenden Elements zu haben, sind diese "verschachtelten" Floated-Elemente überhaupt nicht wirklich verschachtelt. Wenn Sie versuchen, ein clear: both;unter Ihre "verschachtelten" schwebenden Objekte zu kleben , werden Sie am Ende auch die Floats der obersten Ebene löschen.

Um Boushleys Lösung zu verwenden, möchte ich hinzufügen, dass Sie ein div wie das folgende platzieren sollten: .fakeFloat {height: 100%; Breite: 100%; float: left; } und platziere dies direkt innerhalb des erweiterten div; Der gesamte Inhalt des erweiterten Div sollte sich dann in diesem fakeFloat-Element befinden.

Aus diesem Grund würde ich empfehlen, in diesem speziellen Fall Tabellen zu verwenden. Floated-Elemente sind wirklich nicht für die gewünschte Erweiterung ausgelegt, wohingegen die Lösung mit einer Tabelle trivial ist. Im Allgemeinen wird argumentiert, dass Floating eher für Layouts geeignet ist, nicht für Tabellen. Aber Sie verwenden Floating hier sowieso nicht, Sie fälschen es - und diese Art von Niederlage macht den Zweck des stilistischen Arguments für diesen speziellen Fall zunichte meine bescheidene Meinung.

chinchi11a
quelle
Verwenden Sie keine Tabellen für das Layout. Sie können ihre Höhe nicht einstellen. Sie erweitern sich, um ihren Inhalt zu speichern, und sie berücksichtigen keinen Überlauf.
kbro
@kbro: Verwenden Sie keine Tabellen für das Layout, da Inhalt und Anzeige getrennt bleiben sollten. Wenn der Inhalt jedoch als Tabelle strukturiert ist, kann er durchaus abgeschnitten werden overflow: hidden. jsfiddle.net/dave2/a5jbpc85
Dave
3

Ich habe die obigen Lösungen für eine flüssige Linke ausprobiert und eine feste Rechte, aber keine davon hat funktioniert (ich bin mir bewusst, dass die Frage umgekehrt ist, aber ich denke, dass dies relevant ist). 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>
Dominic
quelle
3

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

Die Lösung ist für ein festes Zentrum div und flüssige Seitensäulen.

.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 möchten, ändern Sie einfach die Formel entsprechend.

alex351
quelle
Nicht verfügbar in einigen älteren Browsern wie IE8 und nur teilweise in IE9 ( caniuse.com/#feat=calc )
landi
2

Sie können die Grid-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>

colxi
quelle
1

Ich frage mich, dass niemand position: absolutemit verwendetposition: relative

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

Buksy
quelle
0

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

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/

iamatsundere181
quelle
0

Ich hatte ein ähnliches Problem und fand Folgendes, 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, sondern erweitert automatisch den Bereich "Inhalt". Die statische Breite für das Site-Menü (links) bleibt erhalten.

Und für die automatische Erweiterung des Inhaltsfelds und der Demo des linken vertikalen Felds (Site-Menü):

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

Tidan
quelle
0

Versuchen Sie, Position relative, Entfernung widthund floatEigenschaften der rechten Seite hinzuzufügen, leftund fügen Sie dann eine rightEigenschaft mit 0Wert hinzu.

Sie können auch eine margin leftRegel hinzufügen, deren Wert auf der Breite des linken Elements basiert (+ einige Pixel, wenn Sie dazwischen Platz benötigen) , um seine Position beizubehalten.

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;
    }
Ari
quelle
0

.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 bei mir funktioniert.

Spoorthi
quelle
0

Ich arbeite seit zwei Tagen an diesem Problem und habe eine Lösung, die für Sie und alle anderen, die versuchen, eine reaktionsschnelle feste Breite links zu erstellen, funktioniert. Die rechte Seite füllt den Rest des Bildschirms aus, ohne die linke Seite zu umwickeln. Ich gehe davon aus, dass die Seite sowohl in Browsern als auch auf Mobilgeräten reaktionsfähig 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 dich funktioniert wie für mich. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Larry Robertson
quelle
0

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

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

Verwenden Sie Leerzeichen: nowrap;für Texte in den letzten Punkten für ihre Unstrukturierung.

Artikel X% | Artikel Y% | Artikel Z%

Gesamtlänge immer = 100%!

wenn

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

dann

Punkt X = 70%

Element X ist dominant (erste Elemente dominieren im CSS-Layout der Tabelle)!

Versuchen Sie es mit max-content. Eigenschaft für div innen zum Verteilen von div im Container:

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

}}

Dmytro Yurchenko
quelle
0

Die einfachste Lösung ist die Verwendung von Margin. Dies wird auch reagieren!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
Hobey823
quelle
0

Die einfachste Lösung besteht darin, die Breite des linken Div gleich 100% zu machen - die Breite des rechten Div plus einen beliebigen Abstand zwischen ihnen.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN

Kofferraum
quelle
-2

Ich bin auf dasselbe Problem gestoßen, als ich versucht habe, einige jqueryUI- Steuerelemente zu gestalten. Obwohl die gängige Philosophie jetzt "Verwenden DIVstatt TABLE" ist, fand ich in meinem Fall, dass die Verwendung von TABLE viel besser funktioniert. Insbesondere wenn Sie eine einfache Ausrichtung innerhalb der beiden Elemente benötigen (z. B. vertikale Zentrierung, horizontale Zentrierung usw.), bieten die mit TABLE verfügbaren Optionen hierfür einfache, intuitive Steuerelemente.

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>
J. Peterson
quelle
9
Sie sollten niemals Tabellen zum Formatieren von etwas anderem als tabellarischen Daten verwenden. JE.
mmmeff
1
Das Problem mit Tabellen besteht darin, dass das Markup irreführend ist, wenn das, was Sie anzeigen möchten, keine tabellarischen Daten sein sollen. Wenn Sie das Prinzip der Markup - tragende Bedeutung vernachlässigen, könnten Sie auch wieder zu <font>, <b>etc. HTML entwickeltem Vergangenheit , die weniger auf der Präsentation zu konzentrieren.
Vilinkameni
4
Ich weiß nicht, warum alle über Tische ausflippen. Manchmal sind sie nützlich.
Jandieg
Sie können die Höhe eines Tisches nicht festlegen. Wenn der Inhalt größer wird, wird auch die Tabelle größer. Und es ehrt nicht overflow.
kbro
@ Jandieg: Eine Erklärung finden Sie in der Antwort von Mihai Frentiu. Der gesamte Zweck von CSS besteht darin, Inhalte vom Erscheinungsbild zu trennen. Die Verwendung von Eigenschaften display:table, um das gewünschte Erscheinungsbild von nicht tabellarischen Daten zu erzielen, ist sauber. Das Erzwingen nicht tabellarischer Daten wie Seitenspalten oder Formularsteuerelemente in HTML-Tabellen zur Steuerung des Layouts ist unrein.
Dave