0

上下余白0のページを作ろうとしています。しかし、なぜか上と下にすべてをくっつけることはできません。問題もありheightます。私はheight:100%;すべて持っていますが、<div>s の高さがウィンドウの高さを超えています。また、画面サイズが大きくなると（たとえば、1366*768 より大きい場合）、コンテンツが画面の中央に表示されません。

float:left;このページには,<div>タグで囲まれた3 つの列があります。私は主にそのようなhtmlコードを持っています:

<div id="wrapper">
    <div class="col" id="col1"></div>
    <div class="col" id="col2"></div>
    <div class="col" id="col3"></div>
</div>

これらを変更する私が持っているCSSは次のとおりです。

body, html {
    background-color: darkgray;
    margin: 0;
    height: 100%;
    width: 100%;
}


#wrapper {
    width: 80%;
    height: 100%;
    margin-top: 0;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 0;
    padding: 10px;
    background-color: #666;
    color: white;
    min-width: 722px;
    max-width: 1119px;
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: 0px 0px 25px black;
}


.col {
    /*background-color: red;*/
    height: 100%;
    float:left;
    margin-top: 0;
    margin-right: 0.6667%;
    margin-left: 0.6667%;
}

#col1 {
    width: 24%;
}

#col2 {
    width: 48%;
    box-shadow: 0px 0px 5px black;
}

#col3 {
    width: 24%;
}

この jsfiddle でページを見ることができます。

<h1>（濃い灰色の領域）を上部に貼り付けたいだけでなく、列である他<div>の s も取得します。また、2 番目の見出しがクリックされない限り、高さを画面サイズにしたいのです。その場合、div の高さを増やして、暗い灰色の領域をテキストの最後の行の下部まで拡張します。また、画面サイズが大きくなると中央に配置されないため、全体を中央に配置したいと考えています。

4

4 に答える 4

0

このような

デモ

css *{

margin:0;
    padding:0;
}
    body, html {
        background-color: darkgray;
        margin: 0;
        height: 100%;
        width: 100%;
    overflow:hidden;
    }
于 2013-10-08T11:26:35.487 に答える
0

上部に隙間ができるのはインサイドですpadding: 10px;。それを削除すると、ページの上部に s#wrapper <div>が貼り付けられました。<div>また、ページの divを中央に追加margin: 0 auto;します。#wrapperwrapper

于 2013-10-08T17:11:52.830 に答える
0

これを試してください：http://jsfiddle.net/JN8Cs/

#wrapper に「clearfix」を追加し、#wrapper と body の 100% の高さを削除します

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}
于 2013-10-08T11:29:28.347 に答える