请看技巧与提示的那里,由于文字不是很多,导致在大屏幕上,这个p太短了,现在页面有点难看,但是在比较小的屏幕(笔记本屏幕),效果还是可以的,这个该怎么决解呢?
我希望的效果如下
黄舟2017-04-17 11:49:10
$(".pClassName").css("height",$(document).height());
In this way, you can define the height of a p to be consistent with the page size. If you use js, pay attention to the following issues:
document.body.clientWidth ==> BODY object width
document.body.clientHeight ==> ; BODY object height
document.documentElement.clientWidth ==> visible area width
document.documentElement.clientHeight ==> visible area height
The p height of the child element is set as a percentage and will be automatically adjusted according to the height of the parent element.
If the change is still too big, you can use @media screen and (max-width:1000px) {} to write different styles for different ranges
PHP中文网2017-04-17 11:49:10
One is to set a min-height as mentioned above. There is another method that can adapt to different sizes of screens: use js to get the height of the current body when the page is loaded, and then set the p height to the body according to your needs. A few percent of the height, so that no matter what the screen resolution is, the proportions will look the same.
高洛峰2017-04-17 11:49:10
Just use absolute positioning.
.main-nav { heigth: 80px; }
.content {position: absolute; top: 90px; bottom: 0; }
PHPz2017-04-17 11:49:10
can set a minimum height to support the content height of the blank area, such as min-height:300px;
,
But the min-height
attribute is not supported under IE6, but it can be supported through processing. The code is as follows
min-height:300px;
height:auto !important;
height:300px;
伊谢尔伦2017-04-17 11:49:10
The minimum height can be used, but it may not maintain the best display effect. It is recommended to use js to identify the height of the current page and set the height using a ratio
迷茫2017-04-17 11:49:10
Give p a min-height attribute so that it can still maintain a certain height when the screen is the largest.