0

我有一些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>

选定的 css 相关部分如下所示：

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%;
}

它工作得很好，装备包装是网络浏览器高度的 100%。#outfit-area 和 #products-area 按预期填充了 100% 的 #outfit-wrapper div。

现在我想要一个在#outfit-wrapper 顶部包含一些内容的 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>

我希望包装器具有与以前相同的高度，我只想添加 header-div。我需要 header-div 和“#outfit-area 和 #products-area”的高度为 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，那么我就不能使用可拖动的功能。如果您对我的问题有一个好的答案，请考虑到这一点:-)

4

1 回答 1

0

当您设置<div id="outfit-area">为 时height:100%，它将占据父元素高度的 100% - 在本例<div id="outfit-wrapper">中。

当您添加标题时，服装区域仍然占用 100% 的服装包装，现在包括标题。您需要： A. 给出<div id="header">一个百分比高度，然后从 100% 中减去该高度，并将该值用作 的百分比高度<div id="outfit-area">，如下所示：

#header {
  height: 10%;
}

#outfit-area {
  height: 90%;
}

编辑：这是一个小提琴演示：http: //jsfiddle.net/CVwCr/

-或者-

B. 将标题嵌套在其中，<div id="outfit-area">这样它的高度就不会被添加到 ` 中，如下所示：

<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
    <div id="header">
      content
    </div>
    content...
</div>
于 2013-08-22T22:33:45.403 回答