Html 将div添加到现有的100%高度内容_Html_Css

Html 将div添加到现有的100%高度内容

html css

Html 将div添加到现有的100%高度内容,html,css,Html,Css,我有一些html <html> <body> <div id="outfit-wrapper"> <div class="ui-droppable" id="outfit-area">  content... </div> <div id="products-area"> <!-- drag f

我有一些html

<html>
<body>
<div id="outfit-wrapper">

    <div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->         
        content...
    </div>

    <div id="products-area"> <!-- drag from this area -->
        content...
    </div> <!-- end products-area -->

</div> 
</body>
</html>

它的工作原理非常完美，而且衣服的包装是Webbrowers身高的100%#装潢区和#产品区按预期填充upp 100%的#装潢包装分区

现在我想要一个在#装备包装顶部有一些内容的div：

<html>
<body>
<div id="outfit-wrapper">

    <div id="header">content</div>

    <div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->         
        content...
    </div>

    <div id="products-area"> <!-- drag from this area -->
        content...
    </div> <!-- end products-area -->

</div> 
</body>
</html>


内容
内容。。。
内容。。。

我希望包装的高度与之前相同，我只想添加标题区。我需要标题区和“#装备区和#产品区”的高度一起为100%我如何实现这一点？我必须添加这样的div元素吗？

<html>
<body>
<div id="outfit-wrapper">

    <div id="header">content</div>

    <div id="content-area">

    <div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->         
        content...
    </div>

    <div id="products-area"> <!-- drag from this area -->
        content...
    </div> <!-- end products-area -->

    </div> <!-- end content-area -->

</div> 
</body>
</html>


内容
内容。。。
内容。。。

出于某种奇怪的原因-如果我将#products area设置为position:absolute，那么我就不能使用可拖动功能。如果您对我的问题有一个很好的答案，请考虑到这一点：-）

当您将

设置为

高度：100%

，它占父元素高度的100%——在本例中为

当你添加标题时，装备区仍然占据100%的装备包装，现在包括标题。您需要： A.给

一个百分比高度，然后从100%减去该高度，并使用该值作为

的百分比高度，如下所示：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#outfit-wrapper {
    position:absolute;
    width:98%;
    margin-left:1%;
    margin-right:1%;
    height: auto !important; /* ie6 ignores !important, so this will be overridden below */
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;    
    border-left:1px solid #dfdfdf;
    border-right:1px solid #dfdfdf; 
    padding:0;
}

#outfit-area {
    position:absolute;
    height:100%;
    float:left;
    width:60%;
    overflow: hidden;
    border-right:1px solid #dfdfdf;
}

#products-area {
    float:right;
    width:40%;
}

#header {
  height: 10%;
}

#outfit-area {
  height: 90%;
}

编辑：这里有一把小提琴演示：

-或-

B.将标题嵌套在

的内部，这样它的高度就不会添加到'like so:

<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
    <div id="header">
      content
    </div>
    content...
</div>


内容
内容。。。

#装备区是#装备包装的“左栏”，而#产品区是#装备包装的“右栏”。所以，如果我按照建议去做的话，我只会在屏幕的左半部分得到标题（60%）-请看我的css中的“装备区域”，我希望tje的标题是100%宽度-在“装备区域”和“产品区域”之上，那么你可能想试试技巧A。这里有一个JSFIDLE演示：。感谢您的帮助！！！我现在解决了。我的“ie6 compability”（身高：自动）把事情搞砸了。当我使用hade height:auto时，百分比并没有像预期的那样工作（无论如何在FF中不是这样）。我刚刚发现height:auto在处理高度和百分比时把事情搞砸了。（跳过高度：如果需要，不需要为ie6开发自动零件！）