Erweitern Sie einen div die verbleibende Breite zu füllen

https://stackoverflow.com/questions/1260122

12-09-2019
|

Frage

Ich möchte eine zweispaltige div Layout, wobei jede eine variable Breite beispiels haben kann.

div {
    float: left;
}
.second {
    background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

Ich möchte die ‚Aussicht‘ div auf die gesamte Breite div Sie nach ‚Baum‘ erweitern hat benötigten Platz gefüllt. Derzeit ist mein ‚view‘ div Größe geändert wird zum Inhalt enthält Es wird auch gut sein, wenn beide divs ganze Höhe aufnehmen

Nicht Haftungsausschluss Duplikat:

erweitern div bis max Breite, wenn float: left gesetzt weil dort die linke eine feste Breite hat.

Hilfe mit div - macht die verbleibende Breite div passen weil ich beide zwei Spalten ausgerichtet nach links

brauchen

Lösung

Die Lösung dieses Problems ist eigentlich sehr einfach, aber nicht in alle offensichtlich. Sie müssen etwas auslösen ein „Block-Formatierungskontext“ (BFC) genannt, die mit Schwimmern in einer bestimmten Art und Weise in Wechselwirkung tritt.

Nehmen Sie einfach, dass die zweite div, entfernen Sie den Schwimmer, und geben Sie es overflow:hidden statt. Jeder Überlauf anderen Wert als sichtbar macht den Block auf sich ein BFC-Set. BFCs nicht zulassen Nachkomme schwimmt sie zu entkommen, noch erlauben sie Geschwister / Vorfahren schwebt in sie einzudringen. Der Nettoeffekt ist, dass die schwebte div seine Sache tun wird, dann wird die zweite div wird ein gewöhnlicher Block sein, alle verfügbare Breite Aufnahme , außer dass durch den Schwimmer besetzt .

Dies sollte in allen aktuellen Browsern funktioniert, obwohl Sie hasLayout in IE6 auslösen müssen können und 7. Ich kann mich nicht erinnern.

Demos:

Fixed Links: http://jsfiddle.net/A8zLY/5/
Fixed Rechts: http://jsfiddle.net/A8zLY/2/

Andere Tipps

Ich habe gerade entdeckt die Magie der Flex-Boxen (Anzeige: flex). Versuchen Sie folgendes:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Flex-Boxen geben Sie mir die Kontrolle ich css seit 15 Jahren hatte gewünscht haben. Es ist endlich da! Weitere Informationen: https://css-tricks.com/snippets/css / a-guide-to-Flexbox /

Dies wäre ein gutes Beispiel für etwas, das mit Tischen und schwer (wenn nicht unmöglich, zumindest in einem Cross-Browser-Sinne) zu tun trivial ist mit CSS zu tun.

Wenn beide Spalten Breite festgelegt wurden, dies wäre einfach.

Wenn eine der Spalten Breite festgelegt wurde, das wäre etwas härter, aber völlig machbar.

Bei beiden Spalten mit variabler Breite, IMHO Sie müssen nur eine zweispaltige Tabelle.

Sehen Sie sich diese Lösung aus

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

Hier, das helfen könnte ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

Flexbox Lösung

Dies ist, was die flex-grow Eigenschaft ist für.

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}

<div class="wrapper">
  <div style="background: #bef;">Tree</div>
  <div class="second" style="background: #faa;">View</div>
</div>

Hinweis: Fügen Sie flex Anbieter Präfixe, wenn sie von Ihrem unterstützten Browser .

Verwenden calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

Das Problem dabei ist, dass alle Breiten müssen explizit definiert werden, entweder als Wert (Pixel und em gut funktionieren) oder als Prozentsatz der etwas explizit selbst definiert.

Ich verstehe nicht, warum die Leute bereit sind, so hart zu arbeiten, um eine reiner CSS-Lösung für einfache säulen Layouts zu finden, die so einfach den alten TABLE-Tag.

Alle Browser noch das Tabellenlayout Logik ... Rufen Sie mich an einen Dinosaurier vielleicht, aber ich sage, lass es dir helfen.

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Viel weniger riskant im Hinblick auf die Cross-Browser-Kompatibilität zu.

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
  </div>

</body>

</html>

Sie können versuchen, CSS Grid Layout-.

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

Danke für die Stecker von Simpl.css!

erinnern alle Spalten in ColumnWrapper wickeln wie so.

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

Ich bin über die Version 1.0 von Simpl.css freizugeben, so das Wort helfen zu verbreiten!

Eine etwas andere Implementierung,

Zwei div Platten (Inhalt + extra), Seite an Seite, erweitern content panel wenn extra panel nicht vorhanden ist.

jsfiddle: http://jsfiddle.net/qLTMf/1722/

Pat - Sie haben Recht. Deshalb ist diese Lösung würde genügen beide „Dinosaurier“ und Zeitgenossen. :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

Wenn die Breite der anderen Spalte festgelegt ist, wie etwa mit dem calc CSS Funktion Arbeit für alle gängigen Browser

width: calc(100% - 20px) /* 20px being the first column's width */

Auf diese Weise ist die Breite der zweiten Reihe wird darauf ansprechend (d.h. verbleibende Breite) und angewandter berechnet werden.

flex-GROW - Dies definiert die Fähigkeit für ein flexible Element notwendig zu wachsen, wenn. Er nimmt einen einheitslose Wert, der als Anteil dient. Es schreibt vor, welche Menge des zur Verfügung stehenden Raumes im Innern des flexiblen Behälters sollte das Element aufzunehmen.

Wenn alle Elemente haben flex-wachsen auf 1 gesetzt ist, wird der verbleibende Raum in dem Behälter in gleicher Weise für alle Kinder verteilt werden. Wenn eines der Kinder einen Wert von 2 hat, würde der verbleibende Raum doppelt so viel Platz wie die anderen (oder es wird versuchen, zumindest). Mehr sehen hier

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

Im nicht sicher, ob dies ist die Antwort, die Sie erwarten aber, warum Sie setzen nicht die Breite des Baums auf ‚auto‘ und eine Breite von ‚Ansicht‘ auf 100%?

Haben Sie einen Blick auf die verfügbaren CSS-Layout-Frameworks. Ich würde empfehlen, Simpl oder die etwas komplexer, Blueprint-Framework.

Wenn Sie mit Simpl (die man den Import beinhaltet nur simpl.css Datei), können Sie dies tun:

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

, für ein 50-50 Layout oder:

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

, für einen 25-75 ein.

Es ist so einfach.

Ich schrieb eine Javascript-Funktion, die ich von jQuery $ (document) .ready () aufrufen. Dadurch werden alle Kinder der Eltern div analysieren und nur das am weitesten rechts stehende Kind aktualisieren.

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

Sie Javascript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

Sie können die W3 CSS-Bibliothek verwenden, die eine Klasse enthält namens rest , das genau das tut:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

Vergessen Sie nicht, die CSS-Bibliothek in der Seite header zu verknüpfen:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Hier ist die offizielle Demo: W3 Schule Tryit Editor

Das ist ziemlich einfach Flexbox verwenden. Siehe unten stehenden Code-Schnipsel. Ich habe einen Wrapper Behälter steuern Fluss hinzugefügt und eine globale Höhe eingestellt. Grenzen wurden auch zu identifizieren, die Elemente hinzugefügt. Beachten Sie, dass divs jetzt auf die volle Höhe erweitern als auch, je nach Bedarf. Vendor-Präfixe sollten für Flexbox in einem realen Szenario verwendet werden, da noch nicht vollständig unterstützt wird.

Ich habe ein kostenloses Tool zu verstehen und Design-Layout mit Flexbox entwickelt. Check it out hier: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

Wenn sowohl der Breiten sind variabler Länge, warum Sie die Breite mit einigen Scripting oder Server-Seite nicht berechnen?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow