<div class = "snippet-code"> .rightfloat {   culoarea"> <div class = "snippet-code"> .rightfloat {   culoarea"> <div class = "snippet-code"> .rightfloat {   culoarea" />

Stabilirea înălțimii unui div în HTML cu CSS

Încerc să pun o pagină de tabel cu două coloane. Vreau ca coloana din dreapta să se așeze în partea dreaptă a paginii și această coloană trebuie să aibă o culoare de fundal distinctă. Conținutul din partea dreaptă va fi aproape întotdeauna mai mic decât cel din stânga. Aș dori ca divul din dreapta să fie mereu suficient de înalt pentru a ajunge la separator pentru rândul de dedesubt. Cum îmi pot face culoarea de fundal să umple acel spațiu?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class = "snippet-code">

  .rightfloat {
  culoarea rosie;
  fundal-culoare: #BBBBBB;
  float: dreapta;
  lățime: 200px;
}

.stânga {
  font-size: 20pt;
}

.separator {
  clar: ambele;
  lățime: 100%;
  vârf frontal: 1 pix solid negru;
}  
  <div class = "separator">
  <div class = "rightfloat">
    Un conținut foarte scurt.
  </div>
  <div class = "left">
    Unii într-adevăr cu adevărat cu adevărat cu adevărat
    într-adevăr într-adevăr într-adevăr foarte mare conținut
  </div>
</div>
<div class = "separator">
  <div class = "rightfloat">
    Un conținut mai scurt.
  </div>
  <div class = "left">
    Unii într-adevăr cu adevărat cu adevărat cu adevărat
    într-adevăr într-adevăr într-adevăr foarte mare conținut
  </div>
</div>  
</div></div>


Editați: Sunt de acord că acest exemplu este foarte asemănător unui tabel, iar o masă reală ar fi o alegere bună. Dar pagina mea "reală" va fi în cele din urmă mai puțin asemănătoare tabelului, și aș vrea să comand această sarcină!

De asemenea, din anumite motive, când creez / editez mesajele mele în IE7, codul se afișează corect în vizualizarea de previzualizare, dar când postez efectiv mesajul, formatarea se elimină. Editarea postării mele în Firefox 2 pare să fi funcționat, FWIW.


O altă editare: Da, am răspunsul lui GateKiller neacceptat. Într-adevăr funcționează frumos pe pagina mea simplă, dar nu pe pagina mea mai grea. Voi investiga câteva dintre legăturile pe care mi le-ați indicat.

0
fr hi bn

13 răspunsuri

Am avut aceeași problemă pe site-ul meu ( plug-in nerușin ).

Am avut secțiunea nav "float: right" și corpul principal al paginii are o imagine de fundal de aproximativ 250px, aliniată la dreapta și "repeat-y". Apoi am adăugat ceva cu "clar: amândouă". Aici sunt W3Schools și Proprietăți clare CSS .

Am plasat clar în partea de jos a "paginii" clasificate div. Sursa paginii mele arată cam așa.

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

Sper ca te ajuta :)

0
adăugat

Doar încercând să ajut aici, astfel încât codul să fie mai ușor de citit Rețineți că puteți introduce fragmente de cod făcând clic pe butonul din partea de sus cu "101010". Doar introduceți codul, apoi evidențiați-l și faceți clic pe buton.

Iată un exemplu:

<html>
    <body>
    
0
adăugat

Ahem ...

Răspunsul scurt la întrebarea dvs. este că trebuie să setați înălțimea de 100% pentru corp și eticheta html, apoi setați înălțimea la 100% pentru fiecare element div care doriți să faceți 100% înălțimea paginii.

De fapt, înălțimea de 100% nu va funcționa în majoritatea situațiilor de proiectare - aceasta poate fi scurtă, dar nu este un răspuns bun. Google "layouts de orice coloană cel mai lung". Cea mai bună metodă este de a plasa colțurile din stânga și din dreapta într-un wrap div , de a pluti în colțurile din stânga și din dreapta și apoi de a pluti învelișul - aceasta face să se întindă la înălțimea recipientelor interioare - imagine pe ambalajul exterior. Dar urmăriți orice margini orizontale pe elementele plutitoare în cazul în care obțineți IE "bug float double margin".

0
adăugat
Bună, mulțumesc.
adăugat autor Mukul Kant, sursa

Încercați acest lucru:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>
</div> </div>

0
adăugat

Răspunsul scurt la întrebarea dvs. este că trebuie să setați înălțimea de 100% la corp și eticheta html, apoi setați înălțimea la 100% pentru fiecare element div care doriți să faceți 100% înălțimea paginii.

0
adăugat

Mă pot gândi la 2 opțiuni

  1. Use JavaScript to resize the smaller column on page load.
  2. Fake the equal heights by setting the background-color for the column on the container <div/> instead (<div class="separator"/>) with repeat-y
0
adăugat

Am renunțat la CSS strict și am folosit un mic jquery:

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);
0
adăugat

O structură de 2 coloane este puțin greu să lucrezi în CSS (cel puțin până când CSS3 este practic.)

Plutind stânga și dreapta vor funcționa la un punct, dar nu vă vor permite să extindeți fundalul. Pentru ca fundalul să rămână solid, va trebui să implementați o tehnică cunoscută sub numele de "coloane faux", ceea ce înseamnă că coloanele dvs. nu vor avea o imagine de fundal. Cele două coloane vor fi conținute în interiorul unei etichete părinte. Această etichetă părinte primește o imagine de fundal care conține cele 2 culori ale coloanelor pe care le doriți. Asigurați-vă că acest fundal este la fel de mare ca și cum doriți (dacă este o culoare solidă, faceți doar 1 pixel înălțime) și repetați-l. AListApart are o experiență minunată asupra a ceea ce este necesar pentru a funcționa.

http://www.alistapart.com/articles/fauxcolumns/

0
adăugat

Some browsers support CSS tables, so you could create this kind of layout using the various CSS display: table-* values. There's more information on CSS tables in this article (and the book of the same name) by Rachel Andrew: Everything You Know About CSS is Wrong

Dacă aveți nevoie de un aspect consistent în browserele mai vechi care nu acceptă tabelele CSS, trebuie să faceți două lucruri:

  1. Make your "table row" element clear its internal floated elements.

    The simplest way of doing this is to set overflow: hidden which takes care of most browsers, and zoom: 1 to trigger the hasLayout property in older versions of IE.

    There are many other ways of clearing floats, if this approach causes undesirable side effects you should check the question which method of 'clearfix' is best and the article on having layout for other methods.

  2. Balance the height of the two "table cell" elements.

    There are two ways you could approach this. Either you can create the appearance of equal heights by setting a background image on the "table row" element (the faux columns technique) or you can make the heights of the columns match by giving each a large padding and equally large negative margin.

    Faux columns is the simpler approach and works very well when the width of one or both columns is fixed. The other technique copes better with variable width columns (based on percentage or em units) but can cause problems in some browsers if you link directly to content within your columns (e.g. if a column contained <div id="foo"></div> and you linked to #foo)

Iată un exemplu folosind tehnica de umplere / margine pentru a echilibra înălțimea coloanelor.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class = "snippet-code">

  html, body {
  înălțime: 100%;
}

.rând {
  zoom: 1; / * Flăcări interne clare în IE * /
  overflow: ascuns; / * Flăcări interne clare * /
}

.right-coloană,
.left-coloană {
  pad-bottom: 1000cm; / * Echilibrarea înălțimilor coloanelor * /
  marginea inferioară: -1000e; / * * /
}

. coloana dreaptă {
  lățime: 20%;
  float: dreapta;
}

.left-coloană {
  lățime: 79%;
  plutește la stânga;
}  
  <div class = "rând">
  <div class = "right-column"> Conținutul coloanei din dreapta 
  <div class = "left-column"> Conținutul coloanei stânga </div>
</div>
<div class = "rând">
  <div class = "right-column"> Conținutul coloanei din dreapta 
  <div class = "left-column"> Conținutul coloanei stânga </div>
</div>  
</div></div>

Acest demo de la Barcamp de Natalie Downe poate fi de asemenea util atunci când vă gândiți cum să adăugați coloane suplimentare și distanțe între ele: Coloane de înălțime egală și alte trucuri (este, de asemenea, în cazul în care am învățat prima dată despre marginea / truc de umplutură pentru a echilibra înălțimile coloanelor)

0
adăugat
A lucrat pentru mine. Mulțumiri :)
adăugat autor Vivek Sampara, sursa

Nu este nevoie să scrieți CSS propriu, există o bibliotecă numită "Bootstrap css" prin apelarea că în secțiunea capului HTML, putem realiza multe stilizări, Iată un exemplu: Dacă doriți să furnizați două coloane într-un rând, puteți face următoarele:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>
</div> </div>

Aici md reprezintă un dispozitiv mediu, puteți utiliza col-sm-6 pentru dispozitive mai mici și col-xs-6 pentru dispozitivele de mici dimensiuni

0
adăugat

Here's an example of equal-height columns - Equal Height Columns - revisited

You can also check out the idea of "Faux Columns" as well - Faux Columns

Nu mergeți pe traseul mesei. Dacă nu sunt date tabulare, nu tratează-le ca atare. Este rău pentru accesibilitate și flexibilitate.

0
adăugat

Este suficient să folosiți doar proprietatea CSS width pentru a face acest lucru.

Iată un exemplu:


0
adăugat
Bine ați venit la stack overflow! Multumesc pentru postarea ta! Vă rugăm să nu utilizați semnături / tagline în mesajele dvs. Caseta dvs. de utilizator se consideră ca semnătură și puteți utiliza profilul dvs. pentru a posta orice informație despre dvs. pe care o doriți. Întrebări frecvente despre semnături / tagline
adăugat autor Andrew Barber, sursa

Acest lucru ar trebui să funcționeze pentru dvs.: Setați înălțimea la 100% în CSS pentru elementele html și body . Puteți apoi să ajustați înălțimea la nevoile dvs. în div .

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 
0
adăugat