So vermeiden Sie überschneidungen zwischen zwei divs absolute Positionierung innerhalb eines div-Positionierung relativ?

Der folgende code funktioniert, wenn die Seite hat genug Platz, um die Menge an divs, aber wenn ich die Größe auf mindestens der Seite der zwei divs absolute Positionierung überlappen. Wie kann ich das vermeiden?

Dies ist mein HTML:

<div id="div-chatroom">
    <div id="div-messages">messages here</div>
    <div id="div-sending">sending tools here</div>
</div>

Dies ist mein CSS:

#div-chatroom {
    position: relative;
    height: calc(100% - 70px); /* IE9+ and future browsers */
    height: -moz-calc(100% - 70px); /* Firefox */
    height: -webkit-calc(100% - 70px); /* Chrome, Safari */
    padding: 0;
    text-align: center;
    margin: 0;
    border-right: 2px solid #333333;
    overflow: auto;
}

#div-messages {
    position: absolute;
    top: 10px;
    bottom: 110px;
    left: 10px;
    right: 10px;
    min-height: 200px;
    overflow: auto;
}

#div-sending {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 100px;
}

UPDATE #1
So benötigt der code auf JSFiddle (aber wenn die beiden divs haben position: absolute es scheint nicht zu funktionieren).

InformationsquelleAutor f_ficarola | 2014-01-13

  1. 2

    Ok, ich bekam ein gleichwertiges Ergebnis durch die änderung des Ansatzes.

    CSS (JSFiddle):

    #div-chatroom {
    position: relative;
    height: calc(100% - 70px); /* IE9+ and future browsers */
    height: -moz-calc(100% - 70px); /* Firefox */
    height: -webkit-calc(100% - 70px); /* Chrome, Safari */
    padding: 0;
    text-align: center;
    margin: 0;
    border-right: 2px solid #333333;
    background-color: #ffffff;
    overflow: auto;
}

#div-messages {
    position: relative;
    margin: 0;
    padding: 0;    
    min-height: 200px;
    height: calc(100% - 100px); /* IE9+ and future browsers */
    height: -moz-calc(100% - 100px); /* Firefox */
    height: -webkit-calc(100% - 100px); /* Chrome, Safari */
    background-color: green;
    overflow: auto;
}

#div-sending {
    position: relative;
    margin: 0;
    padding: 0;    
    height: 100px;
    background-color: red;
}

    InformationsquelleAutor f_ficarola

  2. 0

    ist der ganze Zweck der position: "absolute" element, um nicht abhängig oder jede andere elemends auf der Seite (außer Eltern) co kann man eigentlich nicht erreichen. wenn Sie möchten, aligh Sie entsprechend, können Sie dies tun, indem Sie position Stil andere als absolut. veröffentlichen Sie Ihren code auf jsfiddle, dann werden wir in der Lage sein, um eine gute Lösung.

    InformationsquelleAutor LorDex

Schreibe einen Kommentar