发表新帖
发表新帖

How to make div scale vertically all the way down?

后端 未结
关注
7 717
没有蜡笔的小新
没有蜡笔的小新 2020-12-31 22:35

I have the following situation, presented in the picture. Grey div is the parent of magenta and blue divs. Magenta div scales vertically with the content. I would like to ha

相关标签:
7条回答
  • 迷失自我
    2020-12-31 23:09

    If you need support from IE6 and up, the answer is: You can´t in css only.

    There are different solutions to really scale the div or just have it appear like that:

    1. You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
    2. You can use javascript to calculate the height of the grey div and apply it to the blue div

    There is a ccs option using a very big padding and an equally big negative margin, but I don´t remember if it works for all browsers and I can't find the article right now.

    Edit: The big padding / negative margin css solution:

    The article is talking about Firefox 1.5 and Safari 2 so I don't know if it still works, but here it is.

    0 讨论(0)
  • 一生所求
    2020-12-31 23:10

    I got this to work (in Chrome anyway) by setting the parent's div:

    position: absolute;

    and the child's div: 

    height: 100%;
    0 讨论(0)
  • 清歌不尽
    2020-12-31 23:17

    The JavaScript to do it would be...

    <div id="yourDiv" style="background-color: Blue; width: 150px;">
    Hello
</div>

<script type="text/javascript">
    var div = document.getElementById('yourDiv');

    div.style.height = document.body.clientHeight + 'px';
</script>

    Edit:

    Check this link for getting clientHeight in different browsers...

    0 讨论(0)
  • -上瘾入骨i
    2020-12-31 23:20

    Another way to set height 100% in html objects is use styles:

    <html>
<head>
 <style>
     html, body { 
   height: 100%; 
}

#mydiv { 
   height: 100%; 
   background-color:red; 
}           
 </style>
</head>
<body>
<div id="mydiv">aaa</div>
</body>
</html>
    0 讨论(0)
  • 囚心锁ツ
    2020-12-31 23:21

    In my experience setting the height of the blue DIV to 100% doesn't work. The only time that I have wanted this was to have the blue DIV with it's own background, to solve this you need to just have the background of the gray DIV include the blue background of the other DIV.

    0 讨论(0)
  • 我寻月下人不归
    2020-12-31 23:26

    Inside of your parent div, if you set "float:right" on your blue div and play around with your height in percent (height:100%;), I think you should achieve what you're asking.

    Since the blue div is a child of your grey div, the maximum height of your blue div shouldn't exceed your parent div. Unless I'm missing something here...

    Also, if you are floating your blue div on the right, be sure to place it before the magenta div in your markup.

    Acorn

    0 讨论(0)
 看不清?
提交回复
热议问题