html高度为什么不能用百分比,div高度百分比即使使用100perc html和body也不起作用(div height in percentage does not work even with ...

div高度百分比即使使用100perc html和body也不起作用(div height in percentage does not work even with 100perc html and body)

我想使用不依赖于其中项目的百分比来设置div height 。 我在屏幕顶部有一个固定的标题和一个居中的div。 但是以百分比设置高度不起作用。 只有当我在那里添加一些项目时才会放大。

请帮忙。

我有这个代码：

lol

header

main info

而这个CSS 。

html{

width: 100%;

height: 100%;

}

body{

overflow: hidden;

margin: 0;

width: 100%;

height: 100%;

}

header{

position: fixed;

top: 0px;

width: 100%;

height: 10%;

border: solid red 1px;

}

#main{

display: block;

width: 65%;

height: 80%;

border: solid green 1px;

margin: 8% auto 0 auto;

}

I'd like to set the div height using percentages that do not depend on items in it. I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.

Please help.

I have this code:

lol

header

main info

And this CSS.

html{

width: 100%;

height: 100%;

}

body{

overflow: hidden;

margin: 0;

width: 100%;

height: 100%;

}

header{

position: fixed;

top: 0px;

width: 100%;

height: 10%;

border: solid red 1px;

}

#main{

display: block;

width: 65%;

height: 80%;

border: solid green 1px;

margin: 8% auto 0 auto;

}

原文：https://stackoverflow.com/questions/40974062

更新时间：2020-02-17 05:58

最满意答案

你忘了让它的父母100％身高。

#conteiner默认具有自动高度，因为它的div块。 默认高度是其子项的高度。 如果未手动设置父级的高度，则浏览器会忽略子百分比高度百分比

#conteiner {

height: 100%;

}

You forgot to make it's parent 100% height too.

#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser

#conteiner {

height: 100%;

}

相关问答

要解决您的第一个问题，您可以使用： left: @width-80 + @height-10 + 0px;

要么 left: unit(@width-80 + @height-10, px);

你打电话给.winheight mixin时会得到什么错误？ 它应该工作正常(至少使用Less stylesheet中定义的静态变量)。 它可能会因其他因素而失败，因为您的@winheight依赖于动态DOM值(无法保证对DOM的访问)。 在任何情况下，如果您希望将其视为百分比，则应使用%单位调用它：

...

你可以使用css min-height属性来设置div元素的最小高度。现在父元素没有高度。这就是它没有显示的原因 html, body

{

height: 100%;

}

#adelediv {

float: left;

height:100%;

width: 100%;

background-image: url(hello.gif);

b

...

如果我理解正确，你想要将p垂直居中.pg-lie 。 鉴于你当前的代码 ，一个问题是.pg-lie里面的.pg-lie没有CSS规则，所以它的高度默认为auto ，这就是p内容的高度。 如今，即使不知道容器的高度，您也可以使用少数技术之一可靠地垂直居中内容。 看看这些文章： 由Flexbox解决：垂直居中 CSS技巧：以未知为中心 If I understand correctly, you want to vertically center the p in .pg-lie. Given you

...

我会尝试这个正则表达式： /body[^{]*?\{[\s\S]*?(height\s*:\s*\d+%)[\s\S]*?\}/i

描述 演示 http://regex101.com/r/lX5cC9 I would try this regex: /body[^{]*?\{[\s\S]*?(height\s*:\s*\d+%)[\s\S]*?\}/i

Description Demo http://regex101.com/r/lX5cC9

你忘了让它的父母100％身高。 #conteiner默认具有自动高度，因为它的div块。 默认高度是其子项的高度。 如果未手动设置父级的高度，则浏览器会忽略子百分比高度百分比 #conteiner {

height: 100%;

}

You forgot to make it's parent 100% height too. #conteiner has automatic height by default because its div block. And default hei

...

我可以想到几种方法。 不需要任何额外标记的那个是将position: relative放在#bigbox 。 然后，您可以使用顶部和底部值而不是高度值绝对定位小方框。 CSS： img{

width: 100%;

z-index: -1;

}

div#bigbox {

width: 100%;

margin: 0 auto;

margin-left: 0;

position: relative;

}

div#smallbox1 {

left: 11%;

...

问题是你拼错了身体的CSS。 您现在正在为不存在的身体类设置css。 /* Below was the problem */

body {

width:100%;

height:100%;

}

The problem is that you misspelled the css for the body. You are now setting the css for a non-existant body class. /* Below was the problem */

b

...

虽然li的高度由flex-basis: calc(100% / 3 - 2px);定义flex-basis: calc(100% / 3 - 2px); 在处理百分比时，浏览器通常将规范解释为height属性定义的height 。 根据我的经验，在处理百分比高度时， min-height ， max-height和flex-basis从未作为父元素的高度 。 只有height有效，即使它没有明确说明这必须是规范中的方式。 (更新： Firefox可能正在扩大其解释。 ) 你可以做这个调整： 而不是

...

当然身高100％的身体应该是身体标签内所有内容/页面的高度 不可以。 height: 100%表示“元素内容高度的100％”不是“元素内容高度的100％”。 HTML元素的容器(有效地)是视口。 但仍会显示此653px以下的内容。 overflow的默认值不会被hidden 。 Surely body with height 100% should be the height of all the content/page within the body tag No. The height: 1

...

html, body {

width: 100%;

height: 100%;

}

#room {

height:100%;

width:100%;

display:block;

}

#wall_bg_1 {

background-image:url(http://www.placehold.it/30x30);

background-repeat:repeat;

height:66%;

...