Spraw, by div wypełnił pozostałą szerokość


87

Jak sprawić, by element div wypełnił pozostałą szerokość?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

Jak mogę div2uzupełnić pozostałą część?


Aby uzyskać aktualną, właściwą odpowiedź, zmień wybraną najlepszą odpowiedź na odpowiedź Adrien Be.
edwardtyl

Potrzebowałem czegoś przeciwnego, elementu div o stałej szerokości i płynnego elementu div na zewnątrz. Dodałem odpowiedź na dole, jeśli ktoś jej potrzebuje.
damndaewoo

Odpowiedzi:


63

Wypróbuj coś takiego:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

Elementy div w naturalny sposób zajmą 100% szerokości swojego kontenera, nie ma potrzeby jawnego ustawiania tej szerokości. Dodając lewy / prawy margines, taki sam jak dwa boczne elementy div, jego własna zawartość musi znaleźć się między nimi.

Zauważ, że „środkowy element div” znajduje się po „prawym elemencie div” w kodzie HTML


1
Myślę, że znalazłem jeszcze lepsze rozwiązanie w oparciu o Twoje (świetne) rozwiązanie :) patrz poniżej w odpowiedzi, której udzielam
Adrien Be

czy można to zrobić bez zmiany kolejności elementów? tj. lewy dział, środkowy dział, prawy dział. Jest to ważne, jeśli chcesz robić różne rzeczy na różnych rozmiarach ekranu.
Eliezer Steinbock

Tak, ta kolejność lewa-prawa-środka to naprawdę sztuczka. Nie zezwala na to, aby właściwy element div nie znajdował się pod dwoma elementami div, prawda?
Ansjovis86

49

Nowoczesne rozwiązanie (październik 2014): gotowe do płynnych układów


Wprowadzenie:

To rozwiązanie jest jeszcze prostsze niż to, które zapewnia Leigh. W rzeczywistości jest na nim oparty.

Tutaj możesz zauważyć, że środkowy element (w naszym przypadku z "content__middle"klasą) nie ma określonej właściwości wymiarowej - bez szerokości, wypełnienia ani właściwości związanych z marginesem - ale tylko overflow: auto;(patrz uwaga 1).

Ogromną zaletą jest to, że teraz możesz określić a max-widthi a min-widthpo lewej i prawej stronie elementów . Co jest fantastyczne w przypadku płynnych układów… stąd responsywny układ :-)

uwaga 1: w porównaniu z odpowiedzią Leigh, gdzie musisz dodać właściwości margin-left& margin-rightdo "content__middle"klasy.


Kod bez układu płynnego:

Tutaj lewy i prawy element (z klasami "content__left"i "content__right") mają stałą szerokość (w pikselach): stąd nazywany układem niepłynnym.

Demo na żywo na http://jsbin.com/qukocefudusu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Kod z układem płynnym:

Tutaj lewy i prawy element (z klasami "content__left"i "content__right") mają zmienną szerokość (w procentach), ale także minimalną i maksymalną szerokość: stąd nazywany układem płynnym.

Live Demo w płynnym układzie z max-widthwłaściwościami http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Wsparcie przeglądarki

Testowane na BrowserStack.com w następujących przeglądarkach internetowych:

  • IE7 do IE11
  • Ff 20, Ff 28
  • Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)
  • Chrome 20, Chrome 25, Chrome 30, Chrome 33,
  • Opera 20

2
Poleciłbym wszystkim programistom korzystanie z tej metody, zwłaszcza, że ​​Responsive Web Design stał się koniecznością. :)
aullah

1
Ostrożnie z tym. W niektórych przypadkach pasek przewijania pojawi się w elemencie div content__middle w przeglądarce Firefox, jeśli wysokości nie są dokładne z powodu przepełnienia: auto;
Jason

Cześć Jason, to bardzo interesujące, dzięki za wskazanie tego. Czy możesz dostarczyć plik jsfiddle, aby pokazać przykład na żywo, gdy tak się stanie?
Adrien Be

czy to dlatego, że overflowtworzy kontekst formatowania bloku? miałby display: flexten sam efekt?
Jayen

1
Tak, to zrobił. developer.mozilla.org/en-US/docs/Web/Guide/CSS/... był bardzo pomocny. skończyło się overflow-y: hiddenna tym, że a) dozwolona szerokość może być ustawiona, b) ma najlepszą obsługę przeglądarki ic) nie jest tabelą
Jayen

39

Rozwiązaniem są pojemniki Flex-box - i są fantastyczne. Od dekady chciałem czegoś takiego w CSS. Wszystko, czego potrzebujesz, to dodać display: flexdo swojego stylu styl „Main” i flex-grow: 100(gdzie 100 jest dowolne - nie jest ważne, aby było dokładnie 100). Spróbuj dodać ten styl (dodano kolory, aby efekt był widoczny):

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

Więcej informacji o skrzynkach elastycznych tutaj: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Flexbox jest świetny, ale zajmuje tylko tyle miejsca, ile potrzebuje, zamiast całej pozostałej przestrzeni. Tak więc poszedłem z przepełnieniem: rozwiązanie auto.
ThinkBonobo

@ThinkBonobo co masz na myśli mówiąc „to”? Samo pudełko elastyczne będzie działać jak „blok”, a elementy w pudełku elastycznym z pewnością mogą zająć więcej miejsca niż wymaga.
BT,

@BT to oznacza główny centralny div. To zdecydowanie rozwiązanie, które działa w wielu przypadkach, ale nie w moim konkretnym przypadku użycia.
ThinkBonobo

1
@ThinkBonobo Założę się, że sprawię, że to zadziała, jeśli opublikujesz jsFiddle
BT

23

Użyj CSS schematu flexbox flex-grow własności do osiągnięcia tego celu.

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}
<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>


1
Najlepsza odpowiedź tbh. Działa 4 lata później i czyściej niż inne rozwiązania. +1
Harry J

4

Chociaż bitpóźno publikujesz odpowiedź, tutaj jest alternatywne podejście bez używania marginesów.

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

Ta metoda działa jak magia, ale oto wyjaśnienie:) \

Baw się z podobną próbką tutaj.


4

Element DIV, który ma zająć pozostałe miejsce, musi być klasą. Pozostałe elementy DIV mogą być identyfikatorami, ale muszą mieć szerokość.

CSS :

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML :

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

Poniższy link zawiera kod w akcji, który powinien rozwiązać pozostałą kwestię pokrycia obszaru.

jsFiddle


1

Szukałem rozwiązania przeciwnego problemu, w którym potrzebowałem elementu div o stałej szerokości w środku i elementu div o płynnej szerokości po obu stronach, więc wymyśliłem następujące i pomyślałem, że opublikuję go tutaj, gdyby ktoś tego potrzebował.

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}
<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>

Jeśli zmienisz szerokość #centerelementu, musisz zaktualizować właściwość width .fluidna:

width: calc(50% - [half of center width]px);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.