Die opstel van'n div se hoogte in die HTML-met CSS

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

  •  08-06-2019
  •  | 
  •  

Vra

Ek probeer om uit te lê'n tafel-soos die bladsy met twee kolomme.Ek wil die regterkantste kolom om te beskuldigdebank aan die regterkant van die bladsy, en hierdie kolom moet'n duidelike agtergrond kleur.Die inhoud in die regte kant is byna altyd gaan om te wees kleiner as wat op die linkerkant.Ek wil graag die div op die reg om te altyd wees lank genoeg is om te bereik die skeiding vir die ry onder dit.Hoe kan ek maak my agtergrond kleur vul dat die ruimte?

.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:Ek stem saam dat hierdie voorbeeld is baie tafel-soos en'n werklike tafel sou'n goeie keuse.Maar my "ware" bladsy sal uiteindelik minder tafel-soos, en ek wil net graag vir die eerste meester hierdie taak!

Ook, vir een of ander rede, wanneer ek die skep/wysig van my poste in IE7, die kode toon korrek in die voorskou te kyk, maar toe ek eintlik post die boodskap, die opmaak kry verwyder.Redigering my post in Firefox 2 blyk te gewerk het, FWIW.

Nog wysig:Ja, ek unaccepted GateKiller se antwoord.Dit is inderdaad mooi werk op my eenvoudige bladsy, maar nie in my werklike swaarder bladsy.Ek sal ondersoek sommige van die skakels y'all het my gewys op.

Was dit nuttig?

Oplossing

Ahem ...

  

Die kort antwoord op jou vraag is dat jy die hoogte van 100% moet stel om die liggaam en html etiket, dan stel die hoogte tot 100% op elke div element wat jy wil 100% die hoogte van die bladsy maak.

Eintlik, sal 100% hoogte nie werk in die meeste ontwerp situasies - dit kan kort wees, maar dit is nie 'n goeie antwoord. Google "enige kolom langste" uitlegte. Die beste manier is om die links en regs cols binne 'n wrapper div sit, dryf die links en regs cols en dan dryf die omslag - dit maak dit strek tot die hoogte van die innerlike houers - dan beeld agtergrond stel op die buitenste omhulsel. Maar kyk uit vir enige horisontale rande op die gefloteer elemente in geval jy die IE "dubbele marge float fout".

Ander wenke

Gee dit 'n probeer: 

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>

Sommige blaaiers ondersteun CSS tafels, sodat jy hierdie soort uitleg met behulp van die verskillende CSS display: table-* waardes kan skep. Daar is meer inligting oor CSS tafels in hierdie artikel (en die boek met dieselfde naam) deur Rachel Andrew: Alles wat jy weet oor CSS is verkeerd

As jy 'n konsekwente uitleg in ouer blaaiers wat nie ondersteun CSS tafels nodig, moet jy twee dinge doen:

  1. Maak jou "tafel ry" element sy interne gedryf elemente skoon te maak.

    Die eenvoudigste manier om dit te doen, is om overflow: hidden wat sorg neem van die meeste blaaiers, en zoom: 1 stel om die eiendom hasLayout in ouer weergawes van Internet Explorer te aktiveer.

    Daar is baie ander maniere om die skoonmaak van dryf, indien hierdie benadering veroorsaak ongewenste newe-effekte moet jy die vraag watter metode van 'clearfix' check is die beste en die artikel op met uitleg vir ander metodes.

  2. Balanseer die hoogte van die twee "tafel sel" elemente.

    Daar is twee maniere waarop jy kan hierdie benadering. Óf jy kan die voorkoms van gelyke hoogtes te skep deur 'n agtergrond beeld instelling op die "tafel ry" element (die faux kolomme tegniek ) of jy kan die hoogtes van die wedstryd kolomme maak deur elke n groot padding en ewe groot negatiewe marge.

    Faux kolomme is die eenvoudiger benadering en werk baie goed as die wydte van een of beide kolomme is vasgestel. Die ander tegniek is middels beter met veranderlike breedte kolomme (gebaseer op persentasie of em eenhede), maar kan probleme veroorsaak in sommige blaaiers as jy direk na inhoud binne jou kolomme (bv as 'n kolom bevat <div id="foo"></div> en jy gekoppel aan #foo)

Hier is 'n voorbeeld gebruik van die padding / marge tegniek om die hoogte van die kolomme te balanseer. 

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>

Dit Barcamp demo deur Natalie Downe kan ook nuttig wees wanneer uitzoeken hoe om bykomende kolomme en lekker spasiëring en padding voeg: gelyke Hoogte kolomme en ander truuks (dis ook waar ek die eerste keer geleer het oor die kantlyn / padding truuk om kolom hoogtes balanseer)

Ek het op streng CSS en gebruik 'n bietjie 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);

Hier is 'n voorbeeld van gelyke-hoogte kolomme - dieselfde hoogte kolomme - revisited

Jy kan ook kyk na die idee van "Faux Kolomme" sowel - Faux kolomme

Moenie gaan die tafel roete. As dit is nie 'n tabel data, doen dit nie behandel as sulks. Dit is sleg vir toeganklikheid en aanpasbaarheid.

Ek het dieselfde probleem op my site ( skaamtelose plug ).

Ek het die nav artikel: 'n agtergrond beeld oor 250px "float reg" en die hoof van die bladsy het oor in lyn met die reg en "herhaal-y". Ek het toe bygevoeg iets met "duidelik: beide" om dit te. Hier is die W3Schools en die CSS duidelike eiendom .

Ek het die duidelike aan die onderkant van die "page" geklassifiseer div. My bladsy bron lyk iets soos hierdie. 

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)

Ek hoop dit help:)

Geen behoefte om te skryf eie css, daar is'n biblioteek genoem "Bootstrap css" deur die roeping wat in jou HTML-kop-afdeling, kan ons bereik baie stylings,Hier is'n voorbeeld:As jy wil om te voorsien twee kolom in'n ry, kan jy net die volgende doen:

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

Hier md staan vir medium-toestel, kan jy gebruik kol-sm-6 vir die kleiner toestelle en kol-xs-6 vir ekstra klein toestelle

Die kort antwoord op jou vraag is dat jy die hoogte van 100% moet stel om die liggaam en html etiket, dan stel die hoogte tot 100% op elke div element wat jy wil 100% die hoogte van die bladsy maak.

'n 2 kolom uitleg is 'n bietjie moeilik om te werk in CSS (ten minste totdat CSS3 is prakties.)

kry

Floating links en regs sal werk om 'n punt, maar dit sal nie toelaat dat jy die agtergrond uit te brei. Maak agtergronde bly soliede, sal jy 'n tegniek bekend as "faux kolomme," wat basies beteken dat jou kolomme hulself sal 'n agtergrond beeld nie te implementeer. Jou 2 kolomme sal vervat binnekant van 'n ouer tag. Dit hoofdtag is 'n agtergrond beeld wat die 2 kolom kleure wat jy wil bevat gegee. Maak hierdie agtergrond net so groot soos jy dit nodig het om (as dit 'n soliede kleur, net dit 1 pixel hoog maak) en het dit herhaal-y. Alistapart het 'n groot walkthrough op wat nodig is om dit te laat werk.

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

Ek kan dink aan 2 opsies

  1. Gebruik javascript om die kleiner kolom grootte op bladsy laai.
  2. Fake die gelyke hoogtes deur die oprigting van die background-color vir die kolom op die houer <div/> plaas (<div class="separator"/>) met repeat-y

Net probeer hier uit te help sodat die kode is meer leesbaar.
Onthou dat jy stukkies kode kan voeg deur te kliek op die knoppie aan die bokant met 'n "101010". Voer net jou kode dan verlig en klik op die knoppie.

Hier is 'n voorbeeld: 

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

Dit moet work for you: Stel die hoogte tot 100% in jou css vir die html en body elemente. Jy kan dan pas die hoogte van jou behoeftes in die div. 

html {
    height: 100%;
}

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

Dit is genoeg om net gebruik maak van die css eiendom width om dit te doen.

Hier is 'n voorbeeld: 

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

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top