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

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 :)

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:

Încercați acest lucru:

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

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}

  
    

      Content
    
    

      Content
    
  

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.

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.

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/

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".

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
   instead (

   ) with repeat-y

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

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

   and you linked to #foo)

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

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

  

  
 Conținutul coloanei din dreapta 
  
 Conținutul coloanei stânga 


  
 Conținutul coloanei din dreapta 
  
 Conținutul coloanei stânga 
  

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)

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

Iată un exemplu:

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

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:

  
Content
  
Content

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