blocks|key|1894295|text|<div>

<div+style="width:125;height:100%25;">blah+blah+blah</div>

<div+style="height:100%25;">blah+blah+blah</div>

</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1894296|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div&gt;&lt;!-- make a &lt;div&gt; to hold everything in.. --&gt;

&lt;div style="width:125;height:100%;"&gt;blah blah blah&lt;/div&gt;

&lt;div style="height:100%;"&gt;blah blah blah&lt;/div&gt;

&lt;/div&gt;
</code></pre>


blocks|key|2303934|text|确保所有父项都设置了高度。html+/+body+/等|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2303935|该元素将采用其父元素高度的100%25，但前提是父元素确实有一个高度。|2303936|一个非设定高度的100%25将导致另一个非设定高度;)|2303937|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>Make sure all parent items have a height set.
html / body /  etc.</p>

<p>The element will take 100% of it's parents height but only if the parent does HAVE a height.</p>

<p>100% Of a non set height will result in another non set height ;)</p>


blocks|key|1894287|text|使用min-height属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1894288|.height+{
+++min-height:+100%25;
}|code-block|syntax|javascript|1894289|但它非常依赖于上下文，而您没有提供上下文。|1894290|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/CSS/min-height^0|2|A|2|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Use the <a href="https://developer.mozilla.org/en/CSS/min-height" rel="nofollow"><code>min-height</code></a> property.</p>

<pre><code>.height {
   min-height: 100%;
}
</code></pre>

<p>But it is very dependent on context, of which you didn't provide.</p>


blocks|key|3964841|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3964842|<html>
++++<head>
++++++++<style+type="text/css">
++++++++++++body+{
++++++++++++++++margin:+0;
++++++++++++++++padding:+0;
++++++++++++}

++++++++++++#wholepage+{
++++++++++++++++height:+100%25;
++++++++++++++++width:+100%25;
++++++++++++++++background:+red;
++++++++++++++++color:+white;
++++++++++++++++font-weight:+800;
++++++++++++++++font-size:+22px;
++++++++++++++++font-family:+sans-serif;
++++++++++++}
++++++++</style>
++++</head>
++++<body>
++++++++<div+id="wholepage">
++++++++++++Simple+Test
++++++++</div>
++++</body>
</html>|code-block|syntax|javascript|3964843|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;style type="text/css"&gt;
            body {
                margin: 0;
                padding: 0;
            }

            #wholepage {
                height: 100%;
                width: 100%;
                background: red;
                color: white;
                font-weight: 800;
                font-size: 22px;
                font-family: sans-serif;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="wholepage"&gt;
            Simple Test
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|273149|text|您可能需要指定<html>和<body>元素的高度：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|273150|<!DOCTYPE+html+PUBLIC+"-//W3C//DTD+XHTML+1.0+Transitional//EN"+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html+xmlns="http://www.w3.org/1999/xhtml"+xml:lang="en"+lang="en">
<head>
++++<title>extend+div+height+to+entire+webpage</title>
++++<style+type="text/css">
++++++++html,+body+{
++++++++++++height:100%25;
++++++++}
++++++++#tehDiv+{
++++++++++++height:100%25;
++++++++++++background:red;
++++++++}
++++</style>
</head>
<body>
++++<div+id="tehDiv">Example</div>
</body>
</html>|code-block|syntax|javascript|273151|entityMap^0|7|6|E|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>You might have to specify a height for the <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> elements:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;extend div height to entire webpage&lt;/title&gt;
    &lt;style type="text/css"&gt;
        html, body {
            height:100%;
        }
        #tehDiv {
            height:100%;
            background:red;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="tehDiv"&gt;Example&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


<p>Is there a way I can extend the height of a div to the entire webpage using css?</p>

<p>I am not using </p>

<pre><code>.height
 {
  height:100%;
  }
</code></pre>

<p>But this will only extend to the height of the contents inside the div. The div should cover the entire webpage even if there is just a 1 line worth of content inside it. </p>


extend div height to entire webpage

33 天实现自己的 AI 进化论？发文瓜分机械键盘、耳机等万元奖池！点击参加活动：<a href="https://cloud.tencent.com/developer/article/2503022" target="_blank">https://cloud.tencent.com/developer/article/2503022</a><br/> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/01543e0407db10898a7ee9f420794432.jpg"/>

技术创作特训营有奖征文

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云AI代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

文章&问答评论现已支持表情

有没有办法使用css将div的高度扩展到整个网页？我没有使用.height {  height:100%;  }但这只会扩展到div中内容的高度。div应该覆盖整个网页，即使里面只有1行内容。

问将div高度扩展到整个网页
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div高度扩展到整个网页EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div高度扩展到整个网页
EN