Kann man zwei DIVs nebeneinander ausrichten, wenn einer fest ist?

Question

Ich versuche, ein Design, wo ich möchte eine linke Leiste für die Navigation und Dinge, die behoben werden und nicht Bildlauf, sondern ein Inhaltsfeld daneben, die Scrollen nach Bedarf. Das Problem, auf das ich stoße, wenn ich position: fixed; das erste DIV es technisch mache, was ich will, aber es überlappt das zweite DIV. Ich erschaffe das einfach und benutze JsFiddle, um einfach zu testen, also habe ich keinen anderen Code als diese Geige. Ich gebe zu, ich bin jetzt seit ungefähr 30 Stunden wach, also wenn mir das wirklich dumm ist, bitte vergib mir. Vielen Dank!

FIDDLE

Answer 1

Ich habe versucht, lösen diesen Code zu schreiben, und es ist auch ansprechbar.

* { 
    padding: 0px; 
    margin: 0px; 
} 
#one { 
    float: left; 
    position: fixed; 
    width: 25%; 
    background: #666; 
    height: 100%; 
} 
#two { 
    box-sizing: border-box; 
    padding: 20px; 
    position: absolute; 
    left: 25%; 
    right: 0%; 
    float: right; 
    width: 75%; 
    background: #333; 
} 

Ich hoffe, das hilft.

Answer 2

Versuchen Sie, Ihre aktuellen float und position Stile mit zwingenden:

float: left; und
position: relative;

Answer 3

Statt Festsetzung dass DIV, ich habe sie schweben sowohl auf der linken Seite und geben die zweite DIV Überlauf-y Bildlaufeigenschaft.

Hope this Sie helfen können:

#wrap { 
    background: #999; 
    width: 500px; 
    height: 400px; 
    border: 1px solid black; 
    padding: 5px; 
} 
#one { 
    float: left; 
    width: 25%; 
    background: #666; 
    height: 100%; 
    overflow:hidden; 

} 
#two { 
    float: left; 
    width: 75%; 
    background: #333; 
    height: 100%; 
    overflow-y: scroll; 
} 
.clear { 
    clear: both; 
} 

Wenn es Sie immer nicht usefull einige Rahmen mit Standard Sidebars versuchen.

Answer 4

Obwohl Sie dem zweiten div etwas Marge hinzufügen könnten, um es nach rechts zu verschieben, denke ich nicht, dass Sie dafür fixed verwenden sollten. Sie sollten dies tun:

<div class="div1">This is not moving</div> 
<div class="div2"> Loren ipsum...</div> 

html, body{ 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
.div1{ 
    background: #DDD; 
    width:40%; 
    height: 100%; 
    float: left; 
    overflow: hidden; 
} 
.div2{ 
    background: #EEE; 
    width:60%; 
    height: 100%; 
    float: left; 
    overflow-y:auto; 
} 

Hier ist ein Stift für Sie: http://codepen.io/vandervals/pen/bdBWJV

Answer 5

ich es geschafft, zu tun, was Sie wollen, aber um mehr div hinzufügen. die HTML würde

<div id="wrap"> 
<div id="testone"><div id="one"></div></div> 
<div id="test"><div id="two">Lorem ipsum... 
</div></div> 
<div class="clear"></div> 

und die CSS dann

#wrap { 
background: #999; 
width: 500px; 
height: 400px; 
border: 1px solid black; 
padding: 5px; 
overflow: scroll; 
} 
#testone{ 
float: left; 
width: 25%; 
background: #666; 
height: 100%; 
} 
#one { 
position: fixed; 
} 
#test{ 
float: right; 
width: 75%; 
height: 100%; 
} 
#two { 
background: #333; 
} 
.clear { 
clear: both; 
} 

Answer 6

sein, wenn Sie hinzufügen position:fixed das Element aus dem Fluss und seine grundsätzlich Funktionen in Bezug auf das Fenster genommen wird.

so das folgende CSS:

#one { 
    float: left; 
    position: fixed; 
    width: 25%; 
    background: #666; 
    height: 100%; 
} 

25% 25% des Fensters nicht mehr als 25% der <div id="wrap"> (und somit die Überlappung), wenn Sie die position:fixed Sie keine Überlappung sehen ausziehen.

mit Position fixiert, möchten Sie wahrscheinlich etwas links auf <div id="two"> versetzt haben, Sie cal Experiment mit:

margin-left: // DO YOUR MATH. 

padding-left: // DO YOUR MATH. 

Answer 7

Sie haben bereits height: 400px; auf über div so die Höhe zu #one angeben zu http://jsfiddle.net/ypL8ypsf/5/

#one { 
    position:fixed; 
    width:16%; 
    background: #666; 
    height:384px; 
} 

Hoffe, das wird helfen

Answer 8

Dies ändert sich in css Ihr Problem

#wrap { 
background: #999; 
width: 500px; 
height: 400px; 
border: 1px solid black; 
padding: 5px; 
overflow: scroll; 
} 
#one {  
position: fixed; 
width: 25%; 
background: #666; 
height: 100%; 
display:inline-block; 
} 
#two {  
width: 70%; 
background: #333; 
height: 100%; 
display:inline-block; 
overflow:hidden; 
margin-left:29%; 
} 
.clear { 
clear: both; 
} 

Answer 9

Wenn Sie Position: an einem Element festgelegt haben. Es kann nur durch das Browserfenster gesteuert werden, kann nicht durch Eltern div. Wenn Sie also die Breite hinzufügen: 25% füllt es 25% Ihres Browserfensters. nicht im Elternteil div.

ich habe 2 Lösungen,

1. Javascript verwenden. dynamisch Breite in 'px' hinzufügen und Position hinzufügen: behoben nach
2. Position verwenden: absolut. statt fest. (Eigentlich Ihre Höhe beträgt 100%, so spielt es keine Rolle Ihrer Position fixiert.)

1nd Lösung: Javascript-Ansatz [Beispielcode]:

//remove position:fixed from #one 
#one { 
    float: left; 
    width: 25%; 
    background: #666; 
    height: 100%; 
} 

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 

<script type="text/javascript"> 
    var calWidth = $("#one").width(); //get the width 
    $("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div 
</script> 

2. Lösung: CSS Ansatz [ Beispielcode]

#wrap{ 
    position:relative; 
} 
#one{ 
    position:absolute; 
}