Warum fügt das Hinzufügen von Inhalten zu einem div der Seite eine Bildlaufleiste hinzu, wenn die übergeordnete Größe konstant ist?

Wenn das h1-Tag unkommentiert ist, wird eine Bildlaufleiste zur Seite hinzugefügt, aber ich weiß nicht warum. Ich vermute, dass es daran liegt, dass die Karten position:fixed haben, aber ich weiß nicht, wie man sie so aussehen lässt, außer position:fixed.

Ich möchte die title Div 20% des Bildschirms aufnehmen und die card-conveyor-belt div, um 80% des Bildschirms, unabhängig von ihrem Inhalt aufzunehmen. Wie kann ich das tun?

HTML:

<body> 
<div class="title"> 
    <!-- 
    <h1> 
    HELLO 
    </h1>--> 
</div> 
<div class="card-conveyor-belt"> 
    <div class="card left"></div> 
    <div class="card center"></div> 
    <div class="card right"></div> 

</div> 
</body>

CSS

html,body{ 
    height:100%; 
    margin:0; 
    padding:0; 
    background-color:#ccc; 
} 
.title{height: 20%;width: 100%;} 
.card-conveyor-belt{ 
    height: 80%; 
    width: 100%; 

} 

.card{ 
    position:fixed; 
    width:80%; 
    height:80%; 
    background-color:white; 
    border-radius:5px; 
} 
.center{ 
    left:10%; 
} 
.left{ 
    left:-78%; 
} 
.right{ 
    left:98%; 
}

Here is the same code in a jsfiddle, wenn Sie möchten, um mit ihm laufen/interagieren.

Quelle

2016-06-29 quantumbutterfly

einfach margin: 0 benutzen Sie Ihr Problem zu beheben:

Jsfiddle: https://jsfiddle.net/dj3mabgz/

h1 { 
    margin: 0; 
}

Quelle

2016-06-29 14:08:00

Danke. Warum verursachen Margen eine Scrollbar, obwohl sie scheinbar im Titel div enthalten ist? – quantumbutterfly

Eine andere Möglichkeit, dieses Problem zu lösen, ist 'h1 {display: inline-block}' in dem Fall, dass Sie den Rand nicht "verlieren". –

Es kann aufgrund der Größe der h1 mit der div überlappend sein, Sie könnten auch versuchen, CSS Normalize zu verwenden, um störende html/css Glitches wie diese zu vermeiden. –

wie die andere Antwort erwähnt, das Problem mit dem Seitenrand auf dem <h1>-Tag ist. Standardmäßig haben alle <h1> Tags (zumindest in Chrome standardmäßig keine anderen Browser) keine Obergrenze von 0.67em. Jetzt, da Sie nicht definiert haben, wo Sie den Block in Ihrem .title Block positionieren wollten, wurde er automatisch oben positioniert. Das Ergebnis ist also, wie Sie auf dem Bild sehen können;

Der Standardrand und die Standardpositionierung "schieben" den gesamten Inhalt nach unten und zwingen die Bildlaufleiste zu erscheinen.

Quelle

2016-06-29 14:45:05

Warum fügt das Hinzufügen von Inhalten zu einem div der Seite eine Bildlaufleiste hinzu, wenn die übergeordnete Größe konstant ist?

Antwort

Verwandte Themen