我的CSS代码中的问题 [英] Issue in my CSS code
本文介绍了我的CSS代码中的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
.PageLayout
{
height:100%;
width:100%;
}
.Header
{
height: 20%;
width: 100%;
}
.MiddlePanel
{
height: 70%;
width: 100%;
}
.Footer
{
height: 10%;
width: 100%;
}
问题：
我的页面没有显示100％的完整宽度和高度。
Issue:
My page is not showing the complete width and height of 100%.
推荐答案
为什么百分比高度失败？
如果您正在设计一个网页，并且您有一个列，您想要占据一个完整的高度窗户，自然倾斜是增加一个高度：100％;那个元素。毕竟，如果你将宽度设置为宽度：100％;元素将占据页面的整个水平空间，因此高度应该相同，对吧？
错误。
要了解原因，您需要了解浏览器如何解释高度和宽度。 Web浏览器根据浏览器窗口的打开宽度计算总可用宽度。如果您没有在文档上设置任何宽度值，浏览器将自动流动内容以填充窗口的整个宽度。
但高度的计算方式不同。实际上，浏览器根本不评估高度，除非内容太长以至于它超出视口（因此需要滚动条）或者网页设计者在页面上的元素上设置绝对高度。否则，浏览器只是让内容在视口的宽度范围内流动，直到它结束。根本不计算高度。
如果在父元素没有设置高度的元素上设置百分比高度，则会出现问题。换句话说，父元素具有默认高度：auto;。实际上，您要求浏览器根据未定义的值计算高度。由于这将等于空值，结果是浏览器什么都不做。
所以，如果你想在你的网页上设置一个百分比的高度，你必须设置你想要高度定义的每个父元素的高度。换句话说，如果您有这样的页面：
Why Percentage Height Fail?
If you're designing a web page, and you have a column that you'd like to take up the full height of the window, the natural inclination is to add a height: 100%; to that element. After all, if you set the width to width: 100%; the element will take up the full horizontal space of the page, so height should work the same, right?
Wrong.
To understand why, you need to understand how browsers interpret height and width. Web browsers calculate the total available width as a function of how wide the browser window is opened. If you don't set any width values on your documents, the browser will automatically flow the contents to fill the entire width of the window.
But height is calculated differently. In fact, browsers don't evaluate height at all unless the content is so long that it goes outside of the view port (thus requiring scroll bars) or if the web designer sets an absolute height on an element on the page. Otherwise, the browser simply lets the content flow within the width of the view port until it comes to the end. The height is not calculated at all.
The problem occurs when you set a percentage height on an element who's parent elements don't have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
So, if you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined. In other words, if you have a page like this:
<html>
<body>
<div style="height: 100%;">
<p>
Make this division 100% height.
</p>
</div>
</body>
</html>
想要给出100％高度的div有两个父元素：< body>和< html>。为了将div的高度定义为相对高度，您还必须设置body和html元素的高度。
The div that you want to give a 100% height to has two parent elements: <body> and <html>. In order to define the height of the div to a relative height, you must set the height of the body and html elements as well.
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
Make this division 100% height.
</p>
</div>
</body>
</html>
src : here[^]
height：100％将无效所有浏览器。
你需要给
min-height：一些px;让我们说600px;
身高：自动; //如果超过600px，高度将增加;
height: 100% will not work in all browsers.
You need to give
min-height: some px; let's say 600px;
height: auto; // so that the height will increase if it exceeds 600px;
这篇关于我的CSS代码中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
