blocks|key|163768|text|我相信你需要确保所有高于100%25高度div的容器div标签也有100%25的高度设置，包括body标签和html。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163769|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I believe you need to make sure that all the container div tags above the 100% height div also has 100% height set on them including the body tag and html.

blocks|key|4669984|text|对于参考手册的代码镜像div，以下部分可能对您有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4669985|http://codemirror.net/demo/fullscreen.html|offset|length|4669986|var+editor+=+CodeMirror.fromTextArea(document.getElementById("code"),+{
++lineNumbers:+true,
++theme:+"night",
++extraKeys:+{
++++"F11":+function(cm)+{
++++++cm.setOption("fullScreen",+!cm.getOption("fullScreen"));
++++},
++++"Esc":+function(cm)+{
++++++if+(cm.getOption("fullScreen"))+cm.setOption("fullScreen",+false);
++++}
++}
});|code-block|syntax|javascript|4669987|另外，我们还可以看看：|4669988|http://codemirror.net/demo/resize.html|4669989|还有一条评论：|4669990|内联样式是可怕的，你应该不惜一切代价避免它，它不仅会让你感到困惑，而且是糟糕的实践。|4669991|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|16|0|0|0|0|0|12|1|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]|Z|$5|V|W|X|A|$Y|N]]]]

For code mirror divs refer to the manual, these sections might be useful to you:

<a href="http://codemirror.net/demo/fullscreen.html" rel="nofollow">http://codemirror.net/demo/fullscreen.html</a>

<pre><code>var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 lineNumbers: true,
 theme: "night",
 extraKeys: {
 "F11": function(cm) {
 cm.setOption("fullScreen", !cm.getOption("fullScreen"));
 },
 "Esc": function(cm) {
 if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
 }
 }
});
</code></pre>

And also take a look at:

<a href="http://codemirror.net/demo/resize.html" rel="nofollow">http://codemirror.net/demo/resize.html</a>

Also a comment:

Inline styling is horrible you should avoid this at all costs, not only will it confuse you, it's poor practice.

blocks|key|163909|text|将包含元素/div设置为一个高度。否则，您要求浏览器将高度设置为未知值的100%25，但它不能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163910|更多信息请点击此处：http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm|offset|length|163911|entityMap|0|LINK|mutability|MUTABLE|url|http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm^0|0|A|23|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Set the containing element/div to a height. Otherwise your asking the browser to set the height to 100% of an unknown value and it can't. 

More info here: <a href="http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm" rel="nofollow">http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm</a>

blocks|key|4670055|text|您没有指定html的“高度”。当你在一个元素(比如div)中分配一个百分比时，css编译器需要知道父元素的大小。如果你不赋值，你应该看到没有高度的div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4670056|最常见的解决方案是在css中设置以下属性：|4670057|html{
++++height:+100%25;
++++margin:+0;
++++padding:+0;
}|code-block|syntax|javascript|4670058|您是在对html标记(html是所有html元素的父元素)说“获取HTML文档中的所有高度”|4670059|我希望我能帮到你。干杯|4670060|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You aren't specifying the "height" of your html. When you're assigning a percentage in an element (i.e. divs) the css compiler needs to know the size of the parent element. If you don't assign that, you should see divs without height.

The most common solution is to set the following property in css:

<pre><code>html{
 height: 100%;
 margin: 0;
 padding: 0;
}
</code></pre>

You are saying to the html tag (html is the parent of all the html elements) "Take all the height in the HTML document"

I hope I helped you. Cheers

blocks|key|163952|text|奈特的答案是正确的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163953|+html,+body+{margin:0;padding:0;height:100%25;}|code-block|syntax|javascript|163954|还要检查你的div或元素是否不在另一个里面(高度小于100%25)希望这能帮助其他人。|163955|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Night's answer is correct

<pre><code> html, body {margin:0;padding:0;height:100%;}
</code></pre>

Also check that your div or element is NOT inside another one (with height less than 100%)
Hope this helps someone else.

I have a div with <code>height: 100%;</code> but it's not working. When I declare a fixed height (for example <code>height: 600px;</code>) it is working, but I would like a responsive design.

html:

<pre class="lang-html prettyprint-override"><code>&lt;blink&gt;&lt;div class="row-fluid split-pane fixed-left" style="position: relative; height: 78%;"&gt;
 &lt;div class="split-pane-component" style="position: relative; width: 50em;"&gt;
 &lt;div style=""&gt;
 &lt;ul class="nav nav-tabs"&gt;
 &lt;li class="active"&gt;&lt;a href="#html" data-toggle="tab"&gt;Html&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#helpers" data-toggle="tab"&gt;Helpers&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

 &lt;div class="tab-content"&gt;
 &lt;div class="tab-pane active" id="html" style="height: 100%;"&gt;
 &lt;textarea id="htmlArea" style="height: 100%;"&gt;{{:html}}&lt;/textarea&gt;
 &lt;/div&gt;
 &lt;div class="tab-pane" id="helpers" style="height: 100%;"&gt;
 &lt;textarea id="helpersArea"&gt;{{:helpers}}&lt;/textarea&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="split-pane-divider" id="my-divider" style="left: 50em; width: 5px;"&gt;&lt;/div&gt;
 &lt;div class="split-pane-component" style="left: 50em; margin-left: 5px;"&gt;
 &lt;div style=""&gt;
 &lt;ul class="nav nav-tabs"&gt;
 &lt;li&gt;
 &lt;a href="#" class="active"&gt;Preview
 &lt;img width="22px" height="16px" class="preview-loader" src="img/spinner-green2.gif" style="display: none" /&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 &lt;/ul&gt;

 &lt;div class="tab-content"&gt;
 &lt;div class="tab-pane active" style="height: 100%;"&gt;
 &lt;iframe name="previewFrame" frameborder="0" allowtransparency="true" allowfullscreen="true" style="width: 100%; height: 100%;"&gt;&lt;/iframe&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;/blink&gt;
</code></pre>

CSS height 100% percent not working

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个height: 100%;的div，但它不工作。当我声明一个固定的高度(例如height: 600px;)时，它是工作的，但我想要一个响应式的设计。html：<blink><div class="row-fluid split-pane fixed-left" style="position: relative...

问CSS高度100%不工作
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS高度100%不工作EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS高度100%不工作
EN