L'impostazione di un div con altezza in HTML con CSS

StackOverflow https://stackoverflow.com/questions/4973

  •  08-06-2019
  •  | 
  •  

Domanda

Sto cercando di stabilire un tavolo-una pagina con due colonne.Voglio la colonna più a destra per dock a destra della pagina, e questa colonna deve avere un distinto colore di sfondo.I contenuti sul lato destro è quasi sempre inferiore a quella a sinistra.Vorrei che il div a destra per essere sempre abbastanza alto da raggiungere il separatore per la riga di sotto di essa.Come posso fare il mio colore di sfondo riempire quello spazio vuoto?

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

Edit:Sono d'accordo che in questo esempio è molto di tabella e tabella effettiva sarebbe una buona scelta.Ma la mia "vera" pagina alla fine sarà meno di tabella piace, e vorrei solo primo master di questo compito!

Inoltre, per qualche motivo, al momento di creare/modificare i miei messaggi in IE7, il codice viene visualizzato correttamente nella visualizzazione anteprima, ma quando ho effettivamente inviare il messaggio, la formattazione viene rimosso.La modifica del mio post in Firefox 2 sembra aver funzionato, FWIW.

Un'altra modifica:Sì, io non GateKiller risposta.In effetti funziona bene sul mio semplice pagina, ma non nel mio attuale pesante pagina.Io indagare alcuni dei link y'all hanno messo in me.

È stato utile?

Soluzione

Ahem...

La risposta breve alla tua domanda è che si deve impostare l'altezza di 100% per il corpo e tag html, quindi impostare l'altezza al 100% su ogni elemento div che si desidera rendere il 100% dell'altezza della pagina.

In realtà, 100% di altezza non funziona con la maggior parte delle situazioni, che può essere breve, ma non è una buona risposta.Google "qualsiasi colonna più lunga" layout.Il modo migliore è quello di mettere la sinistra e a destra le colonne all'interno di un wrapper div, galleggiante , di destra e di sinistra cols e quindi il galleggiante il wrapper - questo rende tratto all'altezza dei contenitori interni - quindi impostare l'immagine di sfondo sull'involucro esterno.Ma guarda per qualsiasi orizzontale margini su elementi mobili nel caso in cui IE "margine doppio galleggiante bug".

Altri suggerimenti

Dare a questo una prova:

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>

Alcuni browser supportano i CSS tabelle, così si potrebbe creare questo tipo di layout utilizzando i vari CSS display: table-* valori.Ci sono maggiori informazioni su CSS tabelle contenute in questo articolo (e il libro con lo stesso nome) di Rachel Andrew: Tutto quello che Sapete Su CSS è Sbagliato

Se avete bisogno di un layout coerente nei vecchi browser che non supportano i CSS, tabelle, è necessario fare due cose:

  1. Assicurarsi che la riga della tabella" elemento chiaro il suo interno elementi mobili.

    Il modo più semplice per farlo è quello di impostare overflow: hidden che si prende cura della maggior parte dei browser, e zoom: 1 per attivare il hasLayout proprietà in vecchie versioni di IE.

    Ci sono molti altri modi di compensazione galleggia, se questo approccio provoca effetti collaterali indesiderati, si dovrebbe verificare la questione il metodo di 'clearfix' è meglio e l'articolo sul fatto di avere il layout per altri metodi.

  2. Bilanciare l'altezza dei due "cella di tabella" elementi.

    Ci sono due modi per avvicinarsi a questo.È anche possibile creare l'aspetto di pari heights, impostare un immagine di sfondo in "riga della tabella" elemento (il finte colonne tecnica), oppure puoi fare le altezze delle colonne partita dando a ciascuna un grande imbottitura e altrettanto ampio margine negativo.

    Finte colonne è l'approccio più semplice e funziona molto bene quando la larghezza di una o entrambe le colonne è stato risolto.L'altra tecnica funziona meglio con colonne a larghezza variabile (in base alla percentuale o em unità), ma può causare problemi con alcuni browser se il link direttamente al contenuto all'interno di colonne (ad es.se una colonna di contenuti <div id="foo"></div> e si è collegato #foo)

Ecco un esempio di utilizzo l'imbottitura/margine tecnica per bilanciare l'altezza delle colonne.

html, body {
  height: 100%;
}

.row {
  zoom: 1;          /* Clear internal floats in IE */
  overflow: hidden; /* Clear internal floats */
}

.right-column,
.left-column {
  padding-bottom: 1000em;  /* Balance the heights of the columns */
  margin-bottom: -1000em;  /*                                    */
}

.right-column {
  width: 20%;
  float: right;
}

.left-column {
  width: 79%;
  float: left;
}
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>

Questo Barcamp demo da Natalie Downe può anche essere utile quando per capire come aggiungere ulteriori colonne e bella la spaziatura e l'imbottitura: Altezza uguale, Colonne e altri trucchi (è anche il luogo dove ho imparato a conoscere i margin/padding trucco per bilanciare altezza della colonna)

Ho rinunciato strettamente CSS e un po ' di 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);

Ecco un esempio di uguale altezza colonne - Di uguale Altezza Colonne - rivisitata

È possibile controllare anche l'idea di "Finto Colonne", come ben Finte Colonne

Non andare la tabella di route.Se non tabulare dati, non trattarla come tale.E ' un male per l'accessibilità e la flessibilità.

Ho avuto lo stesso problema sul mio sito (spudorato).

Ho avuto il nav sezione "float:diritto" e il corpo principale della pagina, ha un'immagine di sfondo su 250px tutto allineato a destra e "repeat-y".Ho poi aggiunto qualcosa "in modo chiaro:sia" ad esso.Qui è il W3Schools e il CSS proprietà clear.

Ho messo il chiaro in fondo alla pagina "" classificato div.La mia sorgente della pagina simile a questa.

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)

Spero che aiuta :)

Non c'è bisogno di scrivere il proprio css, c'è una libreria che si chiama "Bootstrap css" auspicando che nel tuo codice HTML, capo sezione, si possono ottenere molti stili,Ecco un esempio:Se si desidera fornire due colonne in una riga, si può semplicemente eseguire le operazioni seguenti:

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

Qui md sta per medie dispositivo,è possibile utilizzare col-sm-6 per i dispositivi più piccoli e col-xs-6 extra per dispositivi di piccole dimensioni

La risposta breve alla tua domanda è che si deve impostare l'altezza di 100% per il corpo e tag html, quindi impostare l'altezza al 100% su ogni elemento div che si desidera rendere il 100% dell'altezza della pagina.

2 layout di colonna è un po ' difficile andare a lavorare in CSS (almeno fino CSS3 è pratico.)

Galleggiante di destra e di sinistra lavoro ad un punto, ma non permettono di estendere lo sfondo.A fare gli sfondi soggiorno solido, sarà necessario implementare una tecnica nota come "finte colonne", che fondamentalmente significa che le colonne stesse non hanno un'immagine di sfondo.Il 2 colonne saranno contenute all'interno di un tag principale.Questo tag principale è dato un'immagine di sfondo che contiene la colonna 2 colori che si desidera.Fare questo sfondo solo come grande di tutti, come se un colore solido, solo 1 pixel di altezza) e di ripeterla-y.AListApart ha una grande procedura dettagliata su ciò che è necessario per farlo funzionare.

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

Posso pensare a 2 opzioni

  1. Utilizzare javascript per ridimensionare la colonna più piccola al caricamento della pagina.
  2. Falso, uguali altezze impostando il background-color per la colonna sul contenitore <div/> invece (<div class="separator"/>) con repeat-y

Solo cercando di aiutare qui il codice è più leggibile.
Ricordo che è possibile inserire frammenti di codice, cliccando sul pulsante in alto con "101010".Basta inserire il tuo codice, quindi evidenziare e fare clic sul pulsante.

Ecco un esempio:

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

Questo dovrebbe funzionare per voi:Impostare l'altezza al 100% nel tuo foglio di stile css per la html e body elementi.È quindi possibile regolare l'altezza in base alle esigenze del div.

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}

È sufficiente utilizzare la proprietà css width per fare in modo.

Ecco un esempio:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>


.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top