Question

我有一些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按预期填充#outfit-wrapper div的100％。

现在我想要#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，那么我就不能使用draggable functionaliy。如果您对我的问题有一个很好的答案，请考虑一下： - ）

Answer 1

当您将<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/

-OR -

B中。将标题嵌入<div id="outfit-area">内部，以便它的高度不会添加到“像这样：

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

将div添加到现有的100％高度内容中

1 个答案: