webentwicklung-frage-antwort-db.com.de

CSS: Legen Sie die Div-Höhe auf 100% - Pixel fest

Ich habe einen Header auf meiner Seite, der knapp über 100px liegt (111px, um genau zu sein) .__Das div muss sich bis zum unteren Rand des Viewports erstrecken, als hätte ich den unteren Wert auf 0px gesetzt. Das Problem liegt in der Tatsache, dass ich in ie6 (Bug) keine oberen und unteren Werte angeben kann.

Ich kann entweder oben angeben: 111px oder unten: 0px, aber ich brauche immer noch die Höhe, um korrekt zu sein. 100% -111px, abhängig von der Größe des Darstellungsbereichs.

Ich kann nicht scheinen, dass Ausdrucksformen funktionieren, die die Lösung zu sein scheinen

Hier ist mein CSS-Code:

position: absolute; 
width: 200px; 
top: 111px; 
bottom: 0px;

Irgendwelche Vorschläge?

20
moonblade

Ich habe die height - Eigenschaft zu den body - und html -Tags hinzugefügt.

HTML:

<body>
<div id="wrapper">
 <div id="header">header</div>
 <div id="content">content</div>
</div>

CSS:

html, body
{
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper
{
    height: 100%;
    min-height: 100%;
}
#header
{
    height: 111px;
}
22
ranonE

Am besten verwenden Sie dazu Ansichtsschnittstile. Es macht einfach die Arbeit und keine anderen Techniken nötig.

Code:

div{
  height:100vh;
}
<div></div>

21
Blaise M.

Alternativ können Sie einfach position:absolute verwenden:

#content
{
    position:absolute;
    top: 111px;
    bottom: 0px;
}

IE6 mag jedoch keine Deklarationen von oben und unten. Aber Internetentwickler mögen IE6 nicht.

6
Eric

div{
  height:100vh;
  background-color:gray;
}
<div></div>

5
Mohit Sharma

Mit css3 können Sie jetzt versuchen, calc () zu verwenden.

.main{
  height: calc(100% - 111px);
}

sehen Sie sich diese Antwort an: Div width 100% minus fester Pixelbetrag

4
RaphKomjat

div{
  height:100vh;
}
<div></div>

Ich vermute, dass Sie versuchen, klebrige Fußzeile zu bekommen

1
n1313

Negative Margen natürlich!

HTML

<div id="header">
    <h1>Header Text</h1>
</div>
<div id="wrapper">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
        ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus 
        vel quam et quam congue sodales.
    </div>
</div>

CSS

#header
{
    height: 111px;
    margin-top: 0px;
}
#wrapper
{
    margin-bottom: 0px;
    margin-top: -111px;
    height: 100%;
    position:relative;
    z-index:-1;
}
#content
{
    margin-top: 111px;
    padding: 0.5em;
}
0
Eric

100vh funktioniert für mich, aber zuerst hatte ich Javascript verwendet (eigentlich jQuery, aber Sie können es anpassen), um ein ähnliches Problem zu lösen.

HTML

<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="content">content</div>
  </div>
</body>

js/jQuery

var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");

Alternativ können Sie einfach 111px verwenden, wenn Sie headerHeight nicht berechnen möchten.

Möglicherweise möchten Sie dies auch in ein Fenster zur Größenänderung einfügen, um das Skript erneut auszuführen, wenn beispielsweise die Fensterhöhe zunimmt.

0
Chiwda