Home  >  Q&A  >  body text

html5 - 怎么拉长一个div的高度

请看技巧与提示的那里,由于文字不是很多,导致在大屏幕上,这个p太短了,现在页面有点难看,但是在比较小的屏幕(笔记本屏幕),效果还是可以的,这个该怎么决解呢?
我希望的效果如下

天蓬老师天蓬老师2742 days ago1391

reply all(13)I'll reply

  • 黄舟

    黄舟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

    reply
    0
  • PHP中文网

    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.

    reply
    0
  • 高洛峰

    高洛峰2017-04-17 11:49:10

    Just use absolute positioning.

    .main-nav { heigth: 80px; }
    .content {position: absolute; top: 90px; bottom: 0; }

    reply
    0
  • PHPz

    PHPz2017-04-17 11:49:10

    min-height

    reply
    0
  • PHPz

    PHPz2017-04-17 11:49:10

    1. can set a minimum height to support the content height of the blank area, such as min-height:300px;,

    2. 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;

    reply
    0
  • 怪我咯

    怪我咯2017-04-17 11:49:10

    @screen

    reply
    0
  • 伊谢尔伦

    伊谢尔伦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

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:49:10

    You can try it: min-height

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:49:10

    The author can try to wrap this text and add a margin-bottom

    reply
    0
  • 迷茫

    迷茫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.

    reply
    0
  • Cancelreply