CSS三行三列DIV高度自適應的設置

2020-03-24 16:18:56

字體：大中小

來源：轉載

供稿：網友

用腳本控制三行三列div高度自適應的設置方法，其實不必如此麻煩，只要給父div設置一個固定高度，比如10px,其子div的height:100%就可實現高度自適應，不信，看代碼： head
style
body {
font-family: arial, helvetica, sans-serif;
color: black;
margin: 5px;
background:#ffc url(d:/8767a.gif) repeat-y;
padding: 0;
font:12px;
letter-spacing:1px;
text-align:center;
font:120%;
}
ul
{
list-style-type:square;
list-style-image:url(d:/8767a.gif);
list-style-position:inside;
}
li
{
border:1px green solid;
border-width:0px 0px 1px 0px;
cursor:wait;
}
.inline
{
display:block;
}
.div
{
paddin-top:-40px;
}
.maxfont
{
font-size:180%;
}
#header
{
background:gray;
margin:2px 0px;
width:790px;
}
#left
{
background:#ffeef0;
float:left;
width:195px;
height:100%;
}
#middle
{
background:#ffaae0;
float:left;
width:390px;
margin:0px 5px;
height:100%;
}
#right
{
background:#ffaaaa;
float:left;
width:195px;
width:-10px;
height:100%;
}
#footer
{
background:#ffaa11;
clear:both;
width:790px;
margin:1px 0px;
}
#left,#middle,#right
{
text-align:left;
text-indent:24px;
}
#content
{
margin:0px auto;
width:790px;
height:400px;
}
/style
/head
body
div
今天下午
ul
li
p 正常模式 /p
p ssss /p
p aaa /p
bfff
/li
li 夢之都 XHTML 教程. /li
li 夢之都 CSS 教程. /li
li 夢之都 JAVASCRIPT 教程. /li
/ul
/div
div
傷亡事故
ul
li v gma a a /li
li ddd dkdkdkd /li
/ul
/div
div id="header"
h1 腳本控制三行三列自適應高度DIV布局 /h1
/div
div id="content"
div id="left" 親和力指的并不只是關于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。親和力指的并不只是關于盲人和屏幕閱讀器。還有許多人雖然不是盲人，但是有視力障礙 - 你我變老時就會成為他們的一員。使網站變得更具親和力的一個最簡單的方法就是允許用戶改變文字大小；拒絕提供這樣的選擇就剝奪了用戶的主導權，很可能使用戶無法舒適地閱讀。 /div div id="middle" 如果設計者使用像素為單位指定文字大小，大多數的用戶將無法縮放文字，因為 Internet Explorer 改變文字大小的方式與別的瀏覽器不同。Mozilla 和 Opera 可以縮放已經設定像素大小的文字，而Windows下的IE卻不能。 /div
/div
/div
div id="footer" 歡迎訪問：www.devdao.com /div
/bodyhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML中如何使用CSS？

下一篇：css中id選擇器的命名規則有哪些