Question

如何设置黄色<div id="box">的高度（动态）以适应<div id="center">而不重叠Hello World部分？

请忽略jsfiddle中的JavaScript，它的其他部分; p

http://jsfiddle.net/XskMm/3/

感谢您阅读和回答！

编辑：

我为这个问题的可怜人道歉。我会尽力解释我想要的东西。

页面上有两个主要的<div>。我做了一个灰色和一个黄色。我希望黄色div适合灰色的一个（长度和宽度），而不是突出灰色div的轮廓。

我的问题是<h1>和<hr />正在推动<div id="box">向下（就像他们应该的那样），但<div id="box">并没有缩小到合适的高度这样它就不会延伸到<div id="center">

的底部

Answer 1

所以你有这个：

<div id="center">
    <h1> ... </h1>
    <div id="box"> ... </div>
</div>

#center元素的高度为300px。 H1元素具有可变高度（其高度不固定）。并且您希望#box元素占用剩余高度。喜欢做：

#box height = #center height - H1 height

这不能在CSS中完成。可能的解决方案是：

a）JavaScript
b）HTML表格
c）让H1元素具有固定的高度（我推荐这个！）

Answer 2

好吧......再试一次。如果这不是你想要的，请告诉我。

工作示例：http://jsfiddle.net/XskMm/8/

代码：

window.onresize = function() { myResizeFunc();  }

function myResizeFunc() {
    var DOMwidth = window.innerWidth? window.innerWidth: window.document.body.parentElement.clientWidth;
    var DOMheight = window.innerHeight? window.innerHeight: window.document.body.parentElement.clientHeight;
    if (DOMwidth>200) { document.getElementById('center').style.width = (DOMwidth-100) + 'px'; }
     else { document.getElementById('center').style.width = '100px'; }
    if (DOMheight>300) {
        document.getElementById('center').style.height = (DOMheight-100) + 'px';
        document.getElementById('box').style.height = (DOMheight-122) + 'px';
    }
     else {
         document.getElementById('center').style.height= '200px';
         document.getElementById('box').style.height= '178px';
    }

}

window.addEvent('domready', function() {
    myResizeFunc();
});

Answer 3

这是一个可能的解决方案 - 为什么不放弃<div> #center？由于标题始终位于顶部，并且您希望边界区域的高度相同，因此请尝试使用此方法：

<h1>Hello World! <hr /></h1> <div id="box" class="bound"> <p class="drag square"> One </p> <p class="drag square"> Two </p> </div>

这样，您的标记就简化了，您不必担心扩展div #box的高度。（注意：当然，你必须切换一些CSS来适应新的布局。）

Answer 4

您可以在<div id="box">上设置上边距。

Answer 5

我希望这就是你的意思。如果没有，你将不得不更好地解释你的问题。

工作示例：http://jsfiddle.net/XskMm/7/

代码：

window.onresize = function() { myResizeFunc();  }

function myResizeFunc() {
    var DOMwidth = window.innerWidth? window.innerWidth: window.document.body.parentElement.clientWidth;
    if (DOMwidth>200) { document.getElementById('center').style.width = (DOMwidth-100) + 'px'; }
     else { document.getElementById('center').style.width = '100px'; }
}

window.addEvent('domready', function() {
    myResizeFunc();
});

Answer 6

一些评论引出了我的想法，主要是Sime的建议。

由于<div id="box">和<div id="center">，<h1>从<hr />高度被推下来。

为了使<div id="box">相应缩小（高度明确），我将<h1>设置为固定百分比，将<div id="box">设置为固定百分比。

#box {
    min-height: 90%;

    background-color: #FF3;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    opacity: 0.5;
}

h1 {
    height: 10%;
}

百分比总计1.0，因此它们将填满整个<div id="center">。

如何将<div>动态设置为正确的长度？</div>

6 个答案: