CSS中DIV高度的设置？ CSS中DIV高度

css div\u9ad8\u5ea6\u8bbe\u7f6e

1\u3001\u9996\u5148\u6211\u4eec\u65b0\u5efa\u4e00\u4e2a\u6d4b\u8bd5\u9879\u76ee\u7136\u540e\u65b0\u5efa\u4e00\u4e2aindex.html\u3001basic.js\u548cbasic.css\u6587\u4ef6\u3002

2\u3001js\u4fee\u6539html\u6587\u4ef6\u4e2ddiv\u7684style\u4e2d\u503c\u6765\u4fee\u6539div\u7684\u9ad8\u5ea6 HTML\u6587\u4ef6\u4e2d\u7684\u6587\u4ef6\u4ee3\u7801\u5982\u56fe\u6240\u793a\u3002

3\u3001\u8fd0\u884c\u4e4b\u540e\u6211\u4eec\u770b\u5230\u4e24\u4e2adiv\u7684\u9ad8\u5ea6\u662f\u4e00\u6837\u7684 \u63a5\u4e0b\u6765\u6211\u4eec\u5c31\u4f7f\u7528js\u4fee\u6539\u9ad8\u5ea6\u3002

4\u3001\u8fd9\u65f6\u6211\u4eec\u6572js\u4e2d\u7684\u4ee3\u7801 \u83b7\u53d6div1\u7684id \u4f7f\u7528css\u5c5e\u6027\u5bf9\u5e94\u7684style\u5c5e\u6027\u7136\u540e\u8bbe\u7f6e\u9ad8\u5ea6 \u5982\u56fe\u6240\u793a\u3002

5\u3001\u4f7f\u7528js\u4fee\u6539CSS\u6587\u4ef6\u4e2d\u7684div\u7684height\u7684\u503c HTML\u6587\u4ef6\u4e2d\u7684\u4ee3\u7801\u3002

6\u3001\u7136\u540e\u6211\u4eec\u662f\u5728js\u6587\u4ef6\u4e2d\u83b7\u53d6div1\u7684id\u5c5e\u6027 \u7136\u540e\u4f7f\u7528obj.style.cssTest\u6765\u4fee\u6539\u5d4c\u5165\u5f0f\u7684css\u3002

7\u3001\u7136\u540e\u8fd0\u884c\u9879\u76ee\u4e4b\u540e \u4e24\u6b21\u7ed3\u679c\u90fd\u662f\u4e00\u6837\u7684 div\u7684\u9ad8\u5ea6\u6539\u53d8\u4e86 \u3002

\u5728div\u91cc\u9762\u52a0\u4e00\u4e9btextfield\u6216\u8005label\uff0c\u628a\u5c5e\u6027\u8bbe\u4e3a\u9690\u85cf\u5373\u53ef\u3002
\u56de\u590d\uff1a\u5176\u5b9e\uff0c\u4e00\u822c\u9700\u8981\u5728\u7f51\u9875\u4e2d\u83b7\u53d6\u67d0\u4e00\u4e2a\u503c\uff0c\u6216\u8005\u63a7\u5236\u9875\u9762\u7684\u663e\u793a\u6837\u5f0f\uff0c\u6211\u4eec\u7ecf\u5e38\u7528\u5230\u9690\u542b\u57df\uff0c\u8fd9\u662f\u4e13\u95e8\u5904\u7406\u8fd9\u7c7b\u95ee\u9898\u800c\u4ea7\u751f\u7684\u7279\u6b8a\u63a7\u4ef6\uff0c\u4e0d\u540c\u4e8e\u666e\u901a\u7684button\uff0clabel\u7b49\u7b49\u3002
\u4f60\u7684\u60c5\u51b5\u4e3b\u8981\u662f\u63a7\u5236\u9875\u9762\u663e\u793a\uff0c\u90a3\u4e48\u7528textfield\u6216label\u6700\u597d\u3002\u7a7a\u683c\u4e0d\u63a8\u8350\uff1a1. \u592a\u591a\u9020\u6210\u4ee3\u7801\u6df7\u4e71\u30022.\u6709\u7684\u7f16\u8f91\u5668\u5bf9\u7a7a\u683c\u6570\u76ee\u6709\u9650\u5236\u3002
\u5982\u4f55\u5b9e\u73b0\uff1a
\u5728\u4e00\u5bf9\u6807\u7b7e\u4e4b\u5185\uff0c\u5199\u5165label\u6216textfield\u6807\u8bb0\uff0c\u6bd4\u5982\uff1a(\u91cc\u9762\u53ef\u4ee5\u52a0\u5165\u5927\u5c0f\uff0c\u5bbd\uff0c\u9ad8\u5c5e\u6027)
\u8fd9\u53ea\u662f\u4e2a\u4f8b\u5b50\uff0cxhtml\u548c\u8001\u5f0f\u7684html\u8bed\u6cd5\u4e0d\u592a\u4e00\u6837\u3002
\u50cf\u8fd9\u7c7b\u754c\u9762\u6392\u7248\u7684\u7684\u5de5\u4f5c\uff0c\u6700\u597d\u4e0d\u8981\u624b\u5de5\u7f16\u7801\uff0c\u7528\u53ef\u89c6\u5316\u5de5\u5177\uff0c\u76f4\u63a5\u62d6\u62fd\u5373\u53ef\u3002
\u6bd4\u5982\uff1adreamvevavor8\uff0cwebdesigner\u7b49\u7b49\u3002
\u7f16\u7801\u7684\u4e3b\u8981\u7cbe\u529b\u653e\u5728\u540e\u53f0\u7684\u52a8\u6001\u529f\u80fd\u90e8\u5206\uff0c\u6bd4\u5982jsp\uff0casp.net\uff0cc#\u3002

html,

body { height: 100%; padding: 0; margin: 0; }

.mother { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }

.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; } 

.B { height: 100%; background: #D9C666; }

<div class="mother">

    <div class="A">头部DIV</div>

    <div class="B">下部DIV</div>

</div>

代码效果

你可以看下效果，望采纳。

html代码：
<div class="container">
<div class="up"></div>
<div class="down"></div>
</div>
css代码：
<style>
.container{
background-color: lightblue;
width: 500px;
height: 700px;

}
.up{
width: 100%;
height: 200px;
background-color: lightcoral;
}
.down{
width: 200px;
height: auto;
}
</style>

下面的div高度设为auto就行，会自动占满整个父容器剩余的高度

<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.mother {
height: 100%;
width: 100%;
}

.A {
height: 100px;
background: #BBE8F2;
}

.B {
height: calc(100% - 100px);
background: #D9C666;
}
</style>

<div class="mother">
<div class="A">头部DIV</div>
<div class="B">下部DIV</div>
</div>
或者使用 grid 布局:
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.mother {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 100px 1fr;
}

.A {
background: #BBE8F2;
}

.B {
background: #D9C666;
}
</style>

鍦–SS 涓濡備綍浣跨敤鐧惧垎姣璁剧疆椤甸潰 Div 楂樺害?
绛旓細鍥炵瓟锛氫竴涓櫥闄嗙晫闈㈢殑鏂囨。缁撴瀯澶ц嚧濡備笅: <div class="login_wrapper"> <div class="login_header"></div> <div class="login_content"></div> <div class="login_footer"></div></div>鍏朵腑login_header鍜宭ogin_footer鏃犳枃瀛楀唴瀹,鍙湁涓涓儗鏅鑹,棰滆壊鍖哄埆浜巐ogin_content,login_content鏄...

璇烽棶css楂樻墜,div鐨榛樿楂樺害鏄灏??
绛旓細IE6涓嬮粯璁ょ殑瀛椾綋灏哄澶ц嚧鍦 12 - 14px 涔嬮棿銆傚己鍒跺畾涔夎 div 鐨瀛椾綋灏哄<div id="test1" style=" background-color:#FFCCCC;width:400px; clear:both; font-size:0;"></div>銆<html> <head> <style> container{height:100%;border:solid 1px red;width:100%;} top{margin-top:1px;...

濡備綍璁剧疆ul鏍囩鐨勫搴﹀拰楂樺害銆
绛旓細涓昏鐢ㄤ簬璁剧疆div鐨刢ss鏍峰紡銆4銆鍦╟ss鏍囩鍐咃紝閫氳繃class璁剧疆div鐨勫搴︿负300px锛楂樺害涓200px锛岃儗鏅鑹蹭负鐏拌壊銆5銆佸湪test.html鏂囦欢鍐咃紝鍐嶈缃棤搴忓垪琛╱l鐨勬牱寮 锛屼娇鐢╳idth灞炴ц缃叾瀹藉害涓100px锛屽悓鏃朵娇鐢╩argin灞炴ц缃叾灞呬腑鏄剧ず銆6銆佸湪娴忚鍣ㄦ墦寮test.html鏂囦欢锛屾煡鐪嬪疄鐜扮殑鏁堟灉銆

css+div甯冨眬缃戠珯涓瘡涓鍣ㄧ殑楂樺害閮借鍗曠嫭瀹氫箟鍚?
绛旓細涓嶆槸鐨勶紝鍙互鍔犱篃鍙互涓嶅姞锛岃鏄姞浜嗭紝閭ｆ牱楂樺害灏变細鍥哄畾锛屼笉浼氬啀闅忕潃鍐呭鐨勫澶氳岄珮搴﹀鍔犮傜浉鍙嶏紝瑕佹槸鎯宠闅忕潃鍐呭鐨勫澶氳孌IV绐楀彛鐨勯珮搴︿篃澧炲姞锛屾渶濂戒笉瑕璁剧疆DIV鐨勯珮搴锛屼娇鐢ㄩ粯璁ゅ煎嵆鍙

缃戦〉涓浣曞埄鐢css鏍规嵁涓嶅悓鐨勫垎杈ㄧ巼鐨勬樉绀哄櫒璁剧疆div鐨勯珮搴
绛旓細<script language=javascript> //鏍规嵁鍒嗚京鐜囨帶鍒跺眰鐨勪綅缃紝娉ㄦ剰瑕佹斁鍦div涔嬪悗锛屽惁鍒欎細璇存壘涓嶇潃瀵硅薄銆//鏈濂界殑鍔炴硶灏辨槸鏀惧湪html鏈鍚庡暒...//濡傛灉涓瀹氳鏀惧墠闈紝閭ｅ氨鐢‵unction鍚э紝鍦˙ody鐨刼nload浜嬩欢涓姞涓奨XX();鍗冲彲銆//DIV鐨ID锛堝悕绉帮級涓瀹氳瀵瑰彿锛屽瓧姣嶅ぇ灏忓啓瑕佷竴鑷磋繖閲屽氨涓嶅璇翠簡銆<!-- if (...

澶iv濂楀涓皬div,鎬庢牱璁剧疆澶div鐨勯珮搴鑷傚簲?
绛旓細鍦ㄦ渶鍚庝竴涓div 鍚庨潰鍔犱笂 overflow:hidden;濡備笅锛<div style="width:580px; height:auto; margin:0 auto;<div style="height:100px; width:230px; float:left; margin:20px"></div> <div style="height:100px; width:230px; float:left; margin:20px"></div> <div style="height:100px...

CSS+DIV鎬庝箞瀹炵幇缃戦〉宸﹀彸涓ゆ爮楂樺害涓鑷?
绛旓細hr); //姣旇緝hl涓巋r鐨勯珮搴︼紝骞跺皢鏈澶у艰祴缁欏彉閲弇h $(".left").height(mh); //灏唋eft灞楂樺害璁涓烘渶澶ч珮搴h $(".right").height(mh); //灏唕ight灞傞珮搴﹁涓烘渶澶ч珮搴 </script> 杩樺彲浠ラ氳繃涓浜涙粴鍔ㄦ彃浠讹細姣斿jQuery Scrollbars绛夛紝锛岋紝涓よ竟璁剧疆涓鑷撮珮搴︼紝鐒跺悗鍙宠竟澶氬嚭鏉ョ殑鍐呭灏变細鍑虹幇...

銆怐IV+CSS銆戝浣曚娇DIV楂樺害100%
绛旓細---涓婇潰閭ｆ涓嶈锛屾敼涓猴細<html>灏卞彲浠ヤ簡 2.濡傛灉浣犲繀椤诲０鏄庣綉椤佃В鏋愪负xhml鐨勮瘽鎸変笅闈㈡柟娉曪細html,body{height:100%;} 缁欑埗绾у厓绱100%鐨楂樺害鍚div鎵嶅彲浠ユ湁楂樺害 --- 浣犺杩欑鏁堟灉鏈濂芥槸css缁撳悎js鍋氭渶淇濋櫓

DIV+CSS涓<p>鏍囩鎬庝箞闄愬埗鍐呭楂樺害
绛旓細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<body>鏍囩涓紝杈撳叆html浠ｇ爜锛<p style="width: 80px;height: 40px; overflow: hidden">娴嬭瘯P鏍囩鐨勬崲琛</p> 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃惰秴杩噋鏍囩璁剧疆楂樺害鐨鍐呭涓嶄細琚樉绀恒

涓轰粈涔鍦–SS涓缃甦iv鐨勯珮搴涓50%,鍦ㄤ唬鐮<div></div>閲屾樉绀轰笉鍑烘潵
绛旓細height榛樿鍊兼槸auto 瀛div鐨刪eight:50%鏄浉瀵圭埗div鐨刪eight so 浣犺缁欑埗div鎸囧畾Height 100%鎴栧叿浣撳儚绱(200px) 濡傛灉100% 浣犲氨寰楀湪鎸囧畾鐖剁殑鐖剁殑height 鈥︹︹

扩展阅读：css div高度自适应 ... css中div的内外边距设置 ... 子div自适应父div高度 ... css如何设置div居中 ... css两个div之间有空隙 ... css两个div上下距离 ... css设置div上下浮动 ... css div布局的基本步骤 ... css设置div高度为屏幕高度 ...