高度问题 [英] Problem with the heights

问题描述

Hello

我得到了3个div - 顶部底部和中间，

I got 3 divs – top bottom and middle,

顶部必须始终20px并始终在顶部

The top have to be always 20px and always on the top

底部必须始终为20px并且总是在底页

The bottom have to be always 20px and always on the bottom page

如果溢出，mid将得到一个滚动

The mid will get a scroll if overflow

该页面必须不再使用100％。

The page has to kip its 100% not more.

这是我的鳕鱼 - 不知道这么做热。

This is my cod – don’t know hot to do it..

< td style ="background-color：＃f7f7f7"> width：100％;








































































































< tr>

< style >

。top

{

width：100％;

height：20px;

backgr ound-color：Gray;

}

。mid

{

width：100％;

background-color：Olive;

position：relative;

溢出：汽车;

}

。botom

{

身高：20px;

background-color：Teal;

position：absolute;

}

< / style >

< div class = " top" >

top

< / div >

< br /> ;

< div class = " mid" >

middle < br />

中间 < br />

middle < br />

middle < br />

m iddle < br /> ;

中 < br />

middle < br />

middle < br />

middle < br />

middle < br />

middle < br />

middle < br />

middle < br />

middle < br />

middle < br />

中间 < br />

middle < br />

middle < br />

middle < br />

middle < br < font style ="color：blue"> />

middle < br />

中 < br /> ;

middle < br />

middle < br />

middle < br />

middle < br />

middle < br />

中间 < br />

middle < br />

middle < br />

middle < br />

middle < br />

middle < br />

中间 < br />

middle < br />

中间 < br />

< / div >

< br />

< div 类 = < botom" >

bottum

< / div >

<style>

.top

{

width: 100%;

height: 20px;

background-color: Gray;

}

.mid

{

width: 100%;

background-color: Olive;

position:relative;

overflow: auto;

}

.botom

{

width: 100%;

height: 20px;

background-color: Teal;

position: absolute;

}

</style>

<div class="top">

top

</div>

<br />

<div class="mid">

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

middle<br />

</div>

<br />

<div class="botom">

bottum

</div>

推荐答案

不确定你是否还在寻找解决方案。
你可以试试这样的东西：

Not sure if you're still looking for solution to this.
You can try something like this:

< tr>

。 mid

{

width ：100％;

高度 ：80％;

background-color ：橄榄;

位置 ： relative ;

溢出 ： scroll ;

}

.mid

{

width: 100%;

height: 80%;

background-color: Olive;

position:relative;

overflow: scroll;

}

这篇关于高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！