Jak sprawić, by div wypełnił pozostałą przestrzeń poziomą?

419

Mam 2 div: jeden po lewej stronie i jeden po prawej stronie mojej strony. Ten po lewej stronie ma stałą szerokość i chcę, aby ten po prawej stronie wypełniał pozostałą przestrzeń.

#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
źródło
11
Usuń właściwość width i float na #navigation i będzie działać.
Johan Leino
1
@alexchenco: możesz zaktualizować wybraną odpowiedź do odpowiedzi udzielonej przez Hanka
Adrien Be
@AdrienBe faktycznie, jeśli spojrzysz na odpowiedź mystrdat, myślę, że jest jeszcze lepsza. To tylko jedna linia css i tylko ona działała dla mnie (robię trzy kolumny z float: left; na pierwszych dwóch ze stałą szerokością i przepełnieniem: auto na ostatnim i działa świetnie)
edwardtyl
@edwardtyl dość. Właściwie wydaje się, że używa podobnej techniki, jak odpowiedź, którą podałem dla stackoverflow.com/questions/4873832/...
Adrien Be

Odpowiedzi:

71

To wydaje się osiągać to, do czego dążysz.

#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
źródło
8
Musisz jednak usunąć szerokość: 100% na prawym div, aby działało.
Johan Leino
250
To rozwiązanie ma problem. Spróbuj usunąć kolor z LEWEGO elementu. Zauważysz, że kolor z PRAWEGO elementu faktycznie ukrywa się pod nim. Treść wydaje się trafiać we właściwe miejsce, ale sam PRAWY div nie.
Vyrotek,
5
+1 Rozwiązałem również mój problem. Nauczyłem się, że muszę usunąć „float: left” z div napełniania. Pomyślałem, że to sprawi, że strona będzie implode
keyser
12
Być może warto zauważyć, że uwaga Vyroteks jest prawdziwa, ale można ją rozwiązać za pomocą przelewu: ukrytego w prawej kolumnie. Denzel wspomina o tym, ale nie jest to akceptowana odpowiedź, więc możesz przegapić to ...
Ruudt
45
Jest to po prostu błędne, właściwy element ma pełny rozmiar, tylko jego zawartość jest unoszona wokół lewego elementu. To nie jest rozwiązanie, tylko więcej zamieszania.
mystrdat
268

Problem, który znalazłem z odpowiedzią Boushleya, polega na tym, że jeśli prawa kolumna jest dłuższa niż lewa, po prostu owinie się wokół lewej i wznowi wypełnianie całej przestrzeni. Nie takiego zachowania szukałem. Po przeszukaniu wielu „rozwiązań” znalazłem samouczek (teraz link nie działa) na temat tworzenia trzech kolumn.

Autor oferuje trzy różne sposoby, jeden ze stałą szerokością, jeden z trzema zmiennymi kolumnami i jeden ze stałymi kolumnami zewnętrznymi i środkową o zmiennej szerokości. O wiele bardziej elegancki i skuteczny niż inne przykłady, które znalazłem. Znacząco poprawiło moje zrozumienie układu CSS.

Zasadniczo, w prostym przypadku powyżej, przestaw pierwszą kolumnę w lewo i nadaj jej stałą szerokość. Następnie nadaj kolumnie po prawej lewy margines, który jest nieco szerszy niż pierwsza kolumna. Otóż ​​to. Gotowy. Kod Ala Boushleya:

Oto demo w 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>

Na przykładzie Boushleya lewa kolumna trzyma drugą kolumnę po prawej. Jak tylko lewa kolumna się skończy, prawa znów zaczyna wypełniać całą przestrzeń. Tutaj prawa kolumna po prostu wyrównuje się głębiej na stronie, a lewa kolumna zajmuje duży margines tłuszczu. Nie są wymagane interakcje przepływowe.

Motek
źródło
Po zamknięciu znacznika div zawartość po tym div powinna zostać wyświetlona w nowym wierszu, ale tak się nie dzieje. Czy możesz wyjaśnić dlaczego?
fuddin,
powinno być: margines lewy: 190px; Zapomniałeś ';'. Margines po lewej stronie powinien wynosić 180 pikseli.
fuddin
4
Uwaga: jeśli chcesz element o stałej szerokości po prawej stronie, umieść go najpierw w kodzie, w przeciwnym razie zostanie on przesunięty do następnego wiersza.
Trevor
2
@RoniTovi, elementy pływające powinny znajdować się przed tymi, które nie są pływające w html. jsfiddle.net/CSbbM/127
Hank
6
Jak to zrobić, jeśli chcesz uniknąć stałej szerokości? Innymi słowy, czy lewa kolumna ma być tak szeroka, jak to konieczne, a prawa kolumna, aby zająć resztę?
Patrick Szalapski,
126

Rozwiązanie pochodzi z właściwości display.

Zasadniczo musisz sprawić, aby dwa div działały jak komórki tabeli. Zamiast używać float:left, musisz użyć display:table-cellobu div, a dla dynamicznej szerokości div musisz width:auto;także ustawić . Oba elementy div należy umieścić w pojemniku o szerokości 100% z display:tablewłaściwością.

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

I HTML:

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

WAŻNE: W przypadku przeglądarki Internet Explorer musisz określić właściwość float na dynamicznej szerokości div, w przeciwnym razie miejsce nie zostanie wypełnione.

Mam nadzieję, że to rozwiąże twój problem. Jeśli chcesz, możesz przeczytać pełny artykuł, który o tym napisałem na moim blogu .

Mihai Frentiu
źródło
3
Nie działa, gdy zawartość wewnątrz div o szerokości: auto jest większa niż reszta miejsca dostępnego w rzutni.
Nathan Loyer,
4
@einord, to rozwiązanie nie korzysta z tabel, i wiem, że tabel należy używać tylko dla danych tabelarycznych. Więc jest poza kontekstem tutaj. Rzeczywiste tabele i wyświetlanie: właściwości tabeli (+ inne odmiany) to zupełnie inne rzeczy.
Mihai Frentiu
1
@Mhaihai Frentiu, w jaki sposób display: table różni się od rzeczywistego elementu table? Naprawdę chciałbym się tego nauczyć, jeśli są to zupełnie inne rzeczy, dziękuję. =)
einord,
2
@einord, korzystanie z tabel HTML oznacza definicję całej struktury tabeli w kodzie HTML. Model tabeli CSS pozwala sprawić, że prawie każdy element zachowuje się jak element tabeli bez definiowania całego drzewa tabeli.
Mihai Frentiu
1
@Mhaihai Frentiu, dzięki za odpowiedź. Ale czy zachowanie elementu tabeli nie stanowi połowy problemu z wykorzystaniem tabel jako elementów projektu?
einord
123

W dzisiejszych czasach powinieneś skorzystać z flexboxmetody (może być dostosowany do wszystkich przeglądarek z prefiksem przeglądarki).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

Jordania
źródło
Dobre objaśnienie atrybutu CSS znajduje się na stronie www.w3schools.com/cssref/css3_pr_flex-grow.asp. Proste, nowoczesne rozwiązanie, ale może nie działać w starych przeglądarkach.
Edward
4
Flexbox FTW ... Wypróbowałem wszystkie inne rozwiązania w tym wątku, nic nie działa, próbuję tego rozwiązania Flexbox, działa od razu ... klasyczny CSS (tj. Przed pojawieniem się Flexbox i css grid) całkowicie do bani w układzie ... reguła flex i grid :-)
leo
Należy to zaakceptować jako wybrane rozwiązanie na bieżące czasy. Jest to także jedyne „niehackerskie” rozwiązanie.
Greg,
to działa jak czar, oszczędzając mój dzień!
lisnb
tsbaa (powinna to być zaakceptowana odpowiedź)
Ryo
104

Ponieważ jest to dość popularne pytanie, jestem skłonny podzielić się dobrym rozwiązaniem za pomocą BFC.
Codepen próbka z następujących tutaj .

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

W takim przypadku overflow: autowyzwala zachowanie kontekstowe i powoduje, że prawy element rozszerza się tylko do dostępnej pozostałej szerokości i naturalnie rozszerzy się do pełnej szerokości, jeśli .leftzniknie. Bardzo przydatna i czysta sztuczka dla wielu układów interfejsu użytkownika, ale na początku trudno zrozumieć „dlaczego to działa”.

mystrdat
źródło
1
Obsługa przepełnienia przeglądarki. IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
Jewgienij
1
Czasami kończę na bezużytecznym poziomym pasku przewijania elementu .right. W czym jest problem?
Patrick Szalapski
1
@PatrickSzalapski Czy możesz zrobić codepen lub podobny przypadek? Przepełnienie automoże to spowodować w zależności od jego zawartości. Możesz również użyć dowolnej innej wartości przepełnienia, aby uzyskać ten sam efekt, hiddenmoże lepiej działać w twoim przypadku.
mystrdat
1
Co oznacza skrót BFC i czy istnieje dobry ogólny samouczek wyjaśniający BFC w Internecie?
lulalala
1
@lulalala oznacza kontekst formatowania bloku . Oto dokładniejsze wyjaśnienie
Bob
23

Jeśli nie potrzebujesz zgodności ze starszymi wersjami niektórych przeglądarek ( na przykład IE 10 8 lub mniejszej), możesz użyć calc()funkcji CSS:

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

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
Marcos B.
źródło
1
IE 9 i nowsze obsługują atrybut calc. Jedynym problemem związanym z tym rozwiązaniem może być to, że nie znamy szerokości lewej kolumny lub ona się zmienia.
Arashsoft,
Cóż, to rozwiązanie może być zorientowane na elastyczną skrzynkę i przy założeniu, że nie wiesz lub nie obchodzi Cię szerokość pojemnika nadrzędnego. W pytaniu @alexchenco powiedział, że chce wypełnić „pozostałą przestrzeń”, więc ... myślę, że jest poprawny :) i tak, IE 9 jest również obsługiwany, dzięki za notatkę;)
Marcos B.
15

Odpowiedź Boushleya była najbliższa, jednak wskazano jeden problem, który nie został rozwiązany. Prawy div zajmuje całą szerokość przeglądarce; zawartość przyjmuje oczekiwaną szerokość. Aby lepiej zobaczyć ten problem:

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

Zawartość znajduje się we właściwym miejscu (w przeglądarce Firefox), jednak szerokość jest niepoprawna. Kiedy elementy potomne zaczną dziedziczyć szerokość (np. Tabela zwidth: 100% ), otrzymują szerokość równą szerokości przeglądarki, co powoduje, że przelewają się z prawej strony i tworzą poziomy pasek przewijania (w przeglądarce Firefox) lub nie pływają i są przesuwane w dół ( w chromie).

Możesz to łatwo naprawić , dodając overflow: hiddendo prawej kolumny. Zapewnia to prawidłową szerokość zarówno zawartości, jak i div. Ponadto stół otrzyma prawidłową szerokość i wypełni pozostałą dostępną szerokość.

Wypróbowałem niektóre z powyższych rozwiązań, nie działały one w pełni z niektórymi przypadkami na krawędziach i były zbyt skomplikowane, aby uzasadnić ich naprawę. To działa i jest proste.

Jeśli pojawią się jakiekolwiek problemy lub wątpliwości, możesz je zgłosić.

Denzel
źródło
1
overflow: hiddenNaprawdę to naprawia, dziękuję. (Zaznaczona odpowiedź jest niepoprawna BTW, ponieważ rightfaktycznie zajmuje całą dostępną przestrzeń dla rodzica, możesz to zobaczyć we wszystkich przeglądarkach podczas sprawdzania elementów)
huysentruitw
1
Czy ktoś może wyjaśnić, dlaczego to dokładnie działa? Wiem, że widziałem gdzieś dobre wyjaśnienie, ale nie mogę go znaleźć.
tomswift
2
Ustawienie @tomswift overflow: hiddenumieszcza właściwą kolumnę we własnym kontekście formatowania bloku. Elementy blokowe zajmują całą dostępną dla nich przestrzeń poziomą. Zobacz: developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
John Kurlak
overflow:xxxAtrybut jest kluczem. Jak mówisz, przestaje się #rightrozszerzać pod spodem #left. Bardzo starannie rozwiązuje problem, który miałem przy użyciu jQuery UI o zmiennym rozmiarze - z #rightzestawem z atrybutem przepełnienia i #leftustawionym jako zmienny, masz prostą ruchomą granicę. Zobacz jsfiddle.net/kmbro/khr77h0t .
kbro
13

Oto mała poprawka do zaakceptowanego rozwiązania, która zapobiega wpadnięciu prawej kolumny pod lewą kolumnę. Zastąpione width: 100%;z overflow: hidden;pomocą trudne rozwiązania, jeśli ktoś nie wiedział.

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

[edytuj] Sprawdź także przykład układu trzech kolumn: http://jsfiddle.net/MHeqG/3148/

Dariusz Sikorski
źródło
1
Idealne rozwiązanie dla elastycznego paska nawigacyjnego ze stałym logo.
Trunk
5

Jeśli próbujesz wypełnić pozostałe miejsce w Flexbox między 2 elementami, dodaj następującą klasę do pustego div między 2 elementami, które chcesz oddzielić:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}
Helzgate
źródło
4

Posługiwać się 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
źródło
1
Ta odpowiedź powiela odpowiedź Jordana z 2014 r.
TylerH
3

Odpowiedź Boushleya wydaje się być najlepszym sposobem, aby to zrobić za pomocą pływaków. Jednak nie jest bez problemów. Zagnieżdżone elementy pływające w rozwiniętym elemencie nie będą dostępne; spowoduje to uszkodzenie strony.

Metoda pokazana w zasadzie „udaje”, jeśli chodzi o element rozwijający się - w rzeczywistości nie jest pływający, po prostu bawi się z elementami pływającymi o stałej szerokości, używając jego marginesów.

Problem polega właśnie na tym, że element rozwijający się nie jest pływający. Jeśli spróbujesz mieć dowolne zagnieżdżone elementy pływające w rozwijanym elemencie, te „zagnieżdżone” elementy pływające nie są tak naprawdę wcale zagnieżdżone; kiedy próbujesz przykleićclear: both; pływające przedmioty pod „zagnieżdżone” elementy, skończysz również czyszczeniem pływaków najwyższego poziomu.

Następnie, aby skorzystać z rozwiązania Boushleya, chciałbym dodać, że powinieneś umieścić div, takie jak: .fakeFloat {height: 100%; szerokość: 100%; float: left; } i umieść to bezpośrednio w rozszerzonym div; cała zawartość rozwiniętego div powinna zatem znajdować się w tym fałszywym elemencie.

Z tego powodu polecam używanie tabel w tym konkretnym przypadku. Elementy pływające tak naprawdę nie są zaprojektowane do przeprowadzania ekspansji, którą chcesz, podczas gdy rozwiązanie wykorzystujące tabelę jest trywialne. Generalnie argumentuje się, że pływanie jest bardziej odpowiednie dla układów, a nie tabel. Ale i tak nie używasz tutaj pływania, oszukujesz go - i to w pewnym sensie przeczy celowi stylistycznego argumentu w tym konkretnym przypadku, w moja skromna opinia.

chinchi11a
źródło
Nie używaj tabel do układu. Nie można ustawić ich wysokości. Rozszerzają się, aby utrzymać zawartość i nie honorują przepełnienia.
kbro
@kbro: Nie używaj tabel do rozmieszczenia, ponieważ treść i wyświetlanie powinny być oddzielone. Ale jeśli treść ma strukturę tabeli, z pewnością można ją przyciąć overflow: hidden. jsfiddle.net/dave2/a5jbpc85
Dave
3

Próbowałem powyższych rozwiązań dla płynu po lewej stronie, a naprawiony prawy, ale żaden z nich nie zadziałał (wiem, że pytanie jest odwrotne, ale myślę, że to jest istotne). Oto, co zadziałało:

.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>
Dominik
źródło
3

Miałem podobny problem i znalazłem rozwiązanie tutaj: https://stackoverflow.com/a/16909141/3934886

Rozwiązanie jest dla stałych środkowych kolumn div i ciekłych.

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

Jeśli chcesz naprawić lewą kolumnę, po prostu zmień odpowiednio formułę.

alex351
źródło
Niedostępne w niektórych starszych przeglądarkach, takich jak IE8 i tylko częściowo w IE9 ( caniuse.com/#feat=calc )
landi
2

Możesz użyć właściwości Grid CSS, jest to najbardziej przejrzysty, czysty i intuicyjny sposób strukturyzowania twoich pudeł.

#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
źródło
1

Zastanawiam się, że nikt nie używany position: absolutezposition: relative

Tak więc innym rozwiązaniem byłoby:

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

Przykład Jsfiddle

Buksy
źródło
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>
użytkownik1700099
źródło
0

Mam na to bardzo proste rozwiązanie! // 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
źródło
0

Miałem podobny problem i wymyśliłem następujące, które działały dobrze

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>

Ta metoda nie zawinie się, gdy okno zostanie zmniejszone, ale automatycznie rozszerzy obszar „zawartości”. Zachowa statyczną szerokość dla menu strony (po lewej).

A w przypadku automatycznego rozwijania pola zawartości i lewego pola pionowego (menu witryny):

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

Tidan
źródło
0

Spróbuj dodać pozycję relative, usuń widthi floatwłaściwości po prawej stronie, a następnie dodaj lefti dodaj wartość rightz 0wartością.

Możesz także dodać margin leftregułę o wartości opartej na szerokości lewego elementu (+ niektóre piksele, jeśli potrzebujesz miejsca między nimi), aby utrzymać jego pozycję.

Ten przykład działa dla mnie:

   #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
źródło
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

Spróbuj tego. To zadziałało dla mnie.

Spoorthi
źródło
0

Pracuję nad tym problemem od dwóch dni i mam rozwiązanie, które może działać dla Ciebie i wszystkich innych osób, które chcą sprawić, by responsywna stała szerokość była w lewo i aby prawa strona wypełniała pozostałą część ekranu bez owijania się wokół lewej strony. Zakładam, że zamierzam sprawić, aby strona reagowała w przeglądarkach i urządzeniach mobilnych.

Oto kod

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

Oto moje skrzypce, które mogą działać dla ciebie tak samo jak dla mnie. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Larry Robertson
źródło
0

Zasady dotyczące przedmiotów i pojemników;

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

Użyj białych znaków: nowrap; dla tekstów w ostatnich pozycjach za ich niezorganizowanie.

Pozycja X% | Pozycja Y% | Pozycja Z%

Całkowita długość zawsze = 100%!

gdyby

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

następnie

Pozycja X = 70%

Pozycja X jest dominująca (pierwsze elementy dominują w układzie CSS tabeli)!

Wypróbuj max-content; właściwość div div do rozłożenia div w kontenerze:

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

}

Dmytro Jurczenko
źródło
0

Najłatwiejszym rozwiązaniem jest użycie marginesu. To również będzie responsywne!

<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
źródło
0

Najprostszym rozwiązaniem jest wyrównanie szerokości lewego diva do 100% - szerokości prawego diva oraz marginesu między nimi.

<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

Bagażnik samochodowy
źródło
-2

Natknąłem się na ten sam problem, próbując rozmieścić niektóre elementy sterujące interfejsu jqueryUI . Chociaż powszechną filozofią jest teraz „używaj DIVzamiast TABLE”, w moim przypadku użycie TABELI działało znacznie lepiej. W szczególności, jeśli potrzebujesz prostego wyrównania między dwoma elementami (np. Centrowanie w pionie, centrowanie w poziomie itp.), Opcje dostępne w TABELI dają proste, intuicyjne sterowanie.

Oto moje rozwiązanie:

<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
źródło
9
Nigdy nie należy nigdy używać tabel do formatowania czegokolwiek poza danymi tabelarycznymi. ZAWSZE.
mmmeff
1
Problem z tabelami polega na tym, że znaczniki będą wprowadzać w błąd, jeśli to, co próbujesz wyświetlić, nie jest danymi tabelarycznymi. Jeśli zdecydujesz się zaniedbać zasadę znaczników bilansowej znaczenia, można także wrócić <font>, <b>itp HTML Evolved przeszłość mniej koncentrować się na prezentacji.
Vilinkameni
4
Nie wiem, dlaczego wszyscy wariują na temat stołów. Czasami są przydatne.
Jandieg
Nie możesz ustalić wysokości stołu. Jeśli zawartość się powiększy, tabela również się powiększy. I to nie honoruje overflow.
kbro
@Jandieg: wyjaśnienie znajduje się w odpowiedzi Mihai Frentiu. Celem CSS jest oddzielenie treści od wyglądu. Używanie właściwości takich jak display:tableosiągnięcie pożądanego wyglądu danych nie tabelarycznych jest czyste. Zmuszanie danych nie tabelarycznych, takich jak kolumny stron lub formanty do tabel HTML do kontrolowania układu, jest nieczyste.
Dave