2

いろいろと調べたり、試したりしました。高さが可変のトップルーフがあり、下半分で残りのスペースを埋める必要があります。JSfiddle:

http://jsfiddle.net/UCJmQ/

CSS:

.top {
    background-color: lightblue;
    height: 300px;
}
.bottom {
    background-color: green;
    min-height: 100px;
    overflow: hidden;
    height: 100%;
}

html, body {
    height: 100%;
}

HTML:

<div class="top"></div>
<div class="bottom">

</div>

私が今見ているのは、残りの高さではなく、ウィンドウ全体の高さを占める緑色のページです。代わりに残りの高さを取るにはどうすればよいですか?

4

2 に答える 2

3

http://jsfiddle.net/ph35V/

<div class="wrapper">
    <div class="top">
        300px
    </div>
    <div class="bottom">
        Remaining height
    </div>
</div>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
}
.top {
    display: table-row;
    background: lightblue;
    height: 300px;
}
.bottom {
    display: table-row;
    height: 100%;
    background: green;
}

box-sizingも使用できます: border-boxまたは競合する絶対位置

于 2013-10-24T21:50:47.463 に答える