Rozwiń div do maksymalnej szerokości po ustawieniu float: left

Mam coś takiego: 

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

Oba pływaki są konieczne. Chcę, aby content div wypełnił cały ekran minus te 100px dla menu. Jeśli nie używam float div rozszerza się dokładnie tak, jak powinien. Ale jak to ustawić, gdy float jest ustawiony? Jeśli używam sth jak 

style=width:100%

Następnie content div dostaje rozmiar rodzica, który jest albo ciałem lub innym div, który również próbowałem, i tak oczywiście nie pasuje do prawej menu, a następnie jest pokazany poniżej.

 107
htmlwidth
Author: Flo, 2009-06-19
Source

10 answers

Mam nadzieję, że dobrze Cię zrozumiałem, spójrz na to: http://jsfiddle.net/EAEKc/ 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
 135
Author: merkuro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-31 12:40:21

Najbardziej zgodny ze sobą sposób, jaki znalazłem, nie jest zbyt oczywisty. Musisz usunąć float z drugiej kolumny i zastosować overflow:hidden do niej. Chociaż wydaje się to ukrywać wszelkie treści, które wychodzą poza div, to faktycznie zmusza div do pozostania w jego rodzicu.

Używając Twojego kodu, oto przykład jak można to zrobić: 

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Mam nadzieję, że jest to przydatne dla każdego, kto ma ten problem, to, co znalazłem działa najlepiej na stronie, którą budowałem, po próbie dostosowania go do innych rozdzielczości. Niestety, to nie działa, jeśli po treści umieścisz poprawny div, Jeśli ktoś zna dobry sposób na to, aby to działało, z dobrą kompatybilnością IE, byłbym bardzo szczęśliwy, słysząc to.

Nowa, lepsza opcja za pomocą display: flex;

Teraz, gdy model Flexbox jest dość szeroko zaimplementowany, polecam go zamiast tego, ponieważ pozwala znacznie więcej flexibility z układem. Oto prosty dwukolumnowy jak oryginał: 

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

A oto trzy kolumny z kolumną środkową o elastycznej szerokości!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
 93
Author: alanaktion,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-29 14:37:03

Rozwiązanie bez ustalania rozmiaru na marginesie 

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 dla Merkuro, ale jeśli rozmiar float się zmieni, twój stały margines się nie powiedzie. Jeśli użyjesz powyższego CSS po prawej div to ładnie zmieni rozmiar zmieniając rozmiar po lewej float. Jest trochę bardziej elastyczny. Sprawdź skrzypce tutaj: http://jsfiddle.net/9ZHBK/144/

 29
Author: Wilt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-29 07:18:32

Elementy pływające są usuwane z normalnego układu przepływu, a elementy blokowe, takie jak DIV, nie rozciągają się już na szerokość ich rodzica. Zasady zmieniają się w tej sytuacji. Zamiast wymyślać koło na nowo, zajrzyj na tę stronę, aby znaleźć kilka możliwych rozwiązań do stworzenia układu dwóch kolumn, których szukasz: http://www.maxdesign.com.au/presentation/page_layouts/

W szczególności "płynny układ dwukolumnowy".

Zdrówko!
 6
Author: Sean Aitken,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-19 13:26:33

jest to zaktualizowane rozwiązanie dla HTML 5, jeśli ktoś jest zainteresowany i nie lubi "pływających".

Tabela działa świetnie w tym przypadku, ponieważ można ustawić stałą szerokość tabeli i komórki tabeli. 

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

Http://jsfiddle.net/EAEKc/596 / oryginalny kod źródłowy z @merkuro

 4
Author: Snowie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-04 10:14:39

To użycie może rozwiązać twój problem.

width: calc(100% - 100px);


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
 4
Author: suathd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-19 08:20:01

I na podstawie rozwiązania merkuro, jeśli chcesz zmaksymalizować ten po lewej stronie, powinieneś użyć: 

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

Nie został przetestowany na IE, więc może wyglądać na zepsuty na IE.

 3
Author: kubilayeksioglu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-12 04:31:43

Przyjęta odpowiedź może zadziałać, ale nie podoba mi się pomysł nakładania się marginesów. W HTML5 można to zrobić za pomocą display: flex;. To czyste rozwiązanie. Wystarczy ustawić szerokość dla jednego elementu i flex-grow: 1; dla elementu dynamicznego. Wersja edytowana merkuros: https://jsfiddle.net/EAEKc/1499/

 1
Author: Christoph Bühler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-19 13:33:05

Witam istnieje prosty sposób z metodą overflow hidden na prawym elemencie.

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>
 0
Author: Sanjib Debnath,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-21 10:55:14

To może zadziałać: 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
 -1
Author: kirtan-shah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-25 01:06:27