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

それは完璧に機能し、outfit-wrapper は Web ブラウザーの高さの 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 に設定すると、ドラッグ可能な機能を使用できません。私の質問に良い答えがあれば、それを考慮してください:-)

4

1 に答える 1

0

に設定<div id="outfit-area">するheight:100%と、親要素の高さの 100% (この場合は ) になり<div id="outfit-wrapper">ます。

ヘッダーを追加すると、outfit-area は依然として 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 に答える