2

height:100%; を使用しても、コンテナー div (私のコードでは "sayfa") が展開されません。財産。境界線を使用して高さを確認しましたが、コンテンツが十分に長い場合、コンテンツの前にフッターが表示される0です。HTML:

<div class="sayfa">
        <div class="sutun">
            <div class="icerik">
                <a href=#>En Son Eklenenler</a><hr/>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
            </div>
            <div class="icerik">
                <a href=#>En Çok Okunanlar</a><hr/>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
            </div>
        </div>
        <div class="sutun">
            <div class="icerik">
                <a href=#>En Çok Beğenilenler</a><hr/>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
            </div>
        </div>
        <div class="sutun">
            <div class="icerik">
                <a href=#>En Çok Tıklanan Yazarlar</a><hr/>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
                <li><a href=#>Birinci Kitap</a></li>
            </div>
        </div>
    </div>
    <div class="altlik">
    </div>

そしてCSS：

div.sayfa{
width:999px;
height:100%;
margin-left:auto;
margin-right:auto;
border:solid;
}
div.icerik{
margin-right:10px;
margin-left:10px;
width:288px;
height:100%;
border:solid;
border-radius:20px;
background-image:url('/grsl/icerik.jpg');
background-repeat:repeat-x;
padding-left:25px;
padding-top:15px;
border-width:1px;
border-color:#393939;
box-shadow:4px 4px 7px #000;
padding-bottom:20px;
margin-top:20px;
}
div.icerik > hr {
margin-left:-25px;
}
div.icerik > a {
text-decoration:none;
color:#3E4E95;
font-weight:bold;
font-family:arial;
}
div.icerik > li{
list-style:none;
text-decoration:none;
line-height:23px;
}
div.icerik > li > a{
text-decoration:none;
color:#000;
font-family:arial;
}
div.icerik > li:hover > a{
text-decoration:underline;
}
div.sutun{
width:333px;
height:100%;
float:left;
margin-left:-5px;
}
div.altlik{
width:100%;
height:100px;
text-align:center;
background-color:#393939;
position:absolute;
bottom:0px;
margin-top:20px;
}

「Sayfa」はコンテナ div です。「Sutun」はサイファを3つの部分に分けます。「Icerik」はその青い箱です。「Altlik」はフッターです。

4

2 に答える 2

3

浮動要素は親のサイズには影響しませんが、overflowスタイルを使用して子を含めることができます。

div.sayfa{
  width:999px;
  overflow:auto;
  margin-left:auto;
  margin-right:auto;
  border:solid;
}
于 2013-09-14T12:28:13.470 に答える
1

の終了 div のすぐ上に以下のコードを追加しますsayfa。

<div style="clear:both;"></div>

編集

<div class="sayfa">
    <div class="sutun">
        <div class="icerik">
            <a href=#>En Son Eklenenler</a><hr/>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
        </div>
        <div class="icerik">
            <a href=#>En Çok Okunanlar</a><hr/>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
        </div>
    </div>
    <div class="sutun">
        <div class="icerik">
            <a href=#>En Çok Beğenilenler</a><hr/>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
        </div>
    </div>
    <div class="sutun">
        <div class="icerik">
            <a href=#>En Çok Tıklanan Yazarlar</a><hr/>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
            <li><a href=#>Birinci Kitap</a></li>
        </div>
    </div>
    <div style="clear:float;"></div>
----^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^----
</div>
<div class="altlik">
</div>
于 2013-09-14T12:21:20.190 に答える