Ungleiche Höhe von zwei Div, nur mit HTML & CSS

Es gibt zwei vertikale divs, links div ist nicht gleich in der Höhe nach rechts div, während ich einige Position nur zum Erstellen Slider-Effekt verwendet habe, denke ich, dass Problem schafft. Jede Hilfe wird geschätzt.Ungleiche Höhe von zwei Div, nur mit HTML & CSS

Code ist unten:

<!Doctype HTML> 
<HTML lang="en"> 
<head> 
<Title>Slider Test</Title> 
<meta charset="utf-8"> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style> 
.banner{ 
    background-color:#deebf5; 
    padding:5px; 
    border-bottom: 1px solid #ccc; 
    min-height:100px; 
} 
.topology{ 
    width:3%; 
    float:left; 
    background-color:#99ccff; 
} 
.gridarea{ 
    width:97%; 
    float:left; 
} 
.slider{ 
    position:relative; 
} 
.sidenav { 
    height: 100%; 
    width: 0; /* 0 width - changes this with JavaScript */ 
    position: absolute; 
    z-index: 105; 
    top: 0; 
    left: 0; 
    background-color: #99ccff; 
    overflow: hidden; 
} 
.sliderButton{ 
    background-color:#7070db; 
    padding:12px 15px; 
    color:#fff; 
    width:100%; 
    cursor:pointer; 
} 
.textTopology { 
    margin:0px 15px; 
    color:#9999e6; 
    font-size:1.5em; 
    font-weight:500; 
} 
.gridContent{ 
    margin:10px 0px; 
    border-left: 1px solid #eef; 
    border-right: 1px solid #eef; 
    border-bottom:1px solid #eef; 
} 
</style> 
<script> 
function openNav() { 
    document.getElementById("mySidenav").style.width = "300px"; 
} 
function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
} 
</script> 
</head> 
<body> 
<div class="container-fluid"> 
<div class="row"> 

</div><!-- /nav.row end--> 
<div class="banner row"> <!-- Main Banner starts --> 
    <p>Banner goes here</p> 
</div> <!--/Main banner ends here--> 
<div class="row asd"> 
    <div class="topology"> 
     <div class="slider" > 
     <p class="sliderButton pull-right" role="button" onclick="openNav()">&gt;&gt;</p> 
     <div class="textTopology"> 
      <p>S</p> 
      <p>L</p> 
      <p>I</p> 
      <p>D</p> 
      <p>E</p> 
      <p>R</p> 
     </div> 
     <div class="sidenav" id="mySidenav"> 
      <p class="sliderButton" onclick="closeNav()">List <span class="pull-right">&lt;&lt;</span></p> 
      <div> 
       <p>Will display Some content</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="gridarea"> 
     <div> <!-- Grid Rows starts here--> 
      <div class="gridContent col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
       <p>Lorem ipsum dolor sit amet, et stet persius iuvaret eam, habemus adipiscing vis et. Ei clita quidam fastidii usu. Id vel tritani adipisci, usu ad recusabo philosophia, in nonumy tempor conceptam eam. Qui solet alienum efficiendi ea, id vis augue lobortis efficiantur, quo et audiam similique. Eos te vocent ponderum, nemore reformidans te cum, pri ei alii minimum adipisci. 
       Vivendum qualisque mea id, nihil deserunt ut pri, pri an falli veniam timeam. Sea ei illud deterruisset, discere facilisi necessitatibus in quo, vel everti electram ex. Ad solet eligendi cum. Duo ea ferri offendit, eu brute tractatos eos. Eu nec sint habeo aeterno, soleat similique reprimique cum ut, duo mundi iisque voluptaria an. 
       Mea eleifend scriptorem delicatissimi eu. An cum quem constituto vituperatoribus, ceteros salutatus cu eum. Nec eu illud delicatissimi. Bonorum ornatus salutatus mel et. Vis soluta graecis incorrupte ad, modus movet pri ad. 
       Vis ea indoctum gubergren aliquando, ad nulla ubique mei. Tale dolorum adversarium an eum, ea duo tempor tacimates temporibus, vim dolor invenire no. Ad eam agam doctus fierent, nec at nulla nostrud nominavi. Ex platonem consulatu pertinacia vim. Cum consul adolescens interesset eu. Denique albucius menandri ea nam. 
       Nec utinam lobortis ex. Sea singulis urbanitas interesset ne, in est dolorem iracundia intellegebat. Aliquando persecuti scriptorem pri ex, eu everti aperiri eos. Ne per integre rationibus. Eu eum sanctus laboramus reprehendunt, ex mel dicat adolescens deterruisset.</p> 
      </div>  
     </div> 
     <div> <!-- Grid Rows starts here--> 
      <div class="gridContent col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
       <p>Lorem ipsum dolor sit amet, et stet persius iuvaret eam, habemus adipiscing vis et. Ei clita quidam fastidii usu. Id vel tritani adipisci, usu ad recusabo philosophia, in nonumy tempor conceptam eam. Qui solet alienum efficiendi ea, id vis augue lobortis efficiantur, quo et audiam similique. Eos te vocent ponderum, nemore reformidans te cum, pri ei alii minimum adipisci. 
       Vivendum qualisque mea id, nihil deserunt ut pri, pri an falli veniam timeam. Sea ei illud deterruisset, discere facilisi necessitatibus in quo, vel everti electram ex. Ad solet eligendi cum. Duo ea ferri offendit, eu brute tractatos eos. Eu nec sint habeo aeterno, soleat similique reprimique cum ut, duo mundi iisque voluptaria an. 
       Mea eleifend scriptorem delicatissimi eu. An cum quem constituto vituperatoribus, ceteros salutatus cu eum. Nec eu illud delicatissimi. Bonorum ornatus salutatus mel et. Vis soluta graecis incorrupte ad, modus movet pri ad. 
       Vis ea indoctum gubergren aliquando, ad nulla ubique mei. Tale dolorum adversarium an eum, ea duo tempor tacimates temporibus, vim dolor invenire no. Ad eam agam doctus fierent, nec at nulla nostrud nominavi. Ex platonem consulatu pertinacia vim. Cum consul adolescens interesset eu. Denique albucius menandri ea nam. 
       Nec utinam lobortis ex. Sea singulis urbanitas interesset ne, in est dolorem iracundia intellegebat. Aliquando persecuti scriptorem pri ex, eu everti aperiri eos. Ne per integre rationibus. Eu eum sanctus laboramus reprehendunt, ex mel dicat adolescens deterruisset.</p> 
      </div>  
     </div> 
     <div> 
      <div class="gridContent col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
       <p>Lorem ipsum dolor sit amet, et stet persius iuvaret eam, habemus adipiscing vis et. Ei clita quidam fastidii usu. Id vel tritani adipisci, usu ad recusabo philosophia, in nonumy tempor conceptam eam. Qui solet alienum efficiendi ea, id vis augue lobortis efficiantur, quo et audiam similique. Eos te vocent ponderum, nemore reformidans te cum, pri ei alii minimum adipisci. 
       Vivendum qualisque mea id, nihil deserunt ut pri, pri an falli veniam timeam. Sea ei illud deterruisset, discere facilisi necessitatibus in quo, vel everti electram ex. Ad solet eligendi cum. Duo ea ferri offendit, eu brute tractatos eos. Eu nec sint habeo aeterno, soleat similique reprimique cum ut, duo mundi iisque voluptaria an. 
       Mea eleifend scriptorem delicatissimi eu. An cum quem constituto vituperatoribus, ceteros salutatus cu eum. Nec eu illud delicatissimi. Bonorum ornatus salutatus mel et. Vis soluta graecis incorrupte ad, modus movet pri ad. 
       Vis ea indoctum gubergren aliquando, ad nulla ubique mei. Tale dolorum adversarium an eum, ea duo tempor tacimates temporibus, vim dolor invenire no. Ad eam agam doctus fierent, nec at nulla nostrud nominavi. Ex platonem consulatu pertinacia vim. Cum consul adolescens interesset eu. Denique albucius menandri ea nam. 
       Nec utinam lobortis ex. Sea singulis urbanitas interesset ne, in est dolorem iracundia intellegebat. Aliquando persecuti scriptorem pri ex, eu everti aperiri eos. Ne per integre rationibus. Eu eum sanctus laboramus reprehendunt, ex mel dicat adolescens deterruisset.</p> 
      </div> 
     </div> 
    </div> <div class="clearfix"></div><!--Right side contents, all grid areas--> 
</div> <!-- /Topology + Grid contents ends here --> 
</div> <!-- /Main.container ends here which is holding entire divs--> 
</body> 
</HTML>

Quelle

2016-10-19 abhishek kumar

Meinen Sie, dass der Text auf der rechten Seite ist nicht, dass die Spitze? es ist in Ordnung, wenn ich es ausführen –

Meinst du, dass der Slider Inhalt nicht die gleiche Höhe wie der minimierte Schieberegler ist? – veksen

Um klarzustellen, ich möchte nur die linke div mit Hintergrundfarbe gleich in der Höhe als der linken Seiteninhalte div (Lorum Ipsum) zeigen. –

Flexbox zur Rettung! Unter Verwendung des flexshorthand: flex-growflex-shrinkflex-basis.

/* First, we're setting the containing element as flex */ 
 
.row.asd { 
 
    display: flex; 
 
} 
 

 
/* Then, setting the "sidebar" to a maximum of 40px, 
 
    and making sure it doesn't shrink! */ 
 
.topology { 
 
    flex: 1 0 40px; 
 
    background-color: #99ccff; 
 
} 
 

 
/* And giving the content the rest of the width with flex-basis auto */ 
 
.gridarea { 
 
    flex: 0 1 auto; 
 
}

<div class="row asd"> 
 
    <div class="topology"> 
 
    m 
 
    </div> 
 
    <div class="gridarea"> 
 
    <p>Lorem ipsum dolor sit amet, et stet persius iuvaret eam, habemus adipiscing vis et. Ei clita quidam fastidii usu. Id vel tritani adipisci, usu ad recusabo philosophia, in nonumy tempor conceptam eam. Qui solet alienum efficiendi ea, id vis augue lobortis efficiantur, quo et audiam similique. Eos te vocent ponderum, nemore reformidans te cum, pri ei alii minimum adipisci. Vivendum qualisque mea id, nihil deserunt ut pri, pri an falli veniam timeam. Sea ei illud deterruisset, discere facilisi necessitatibus in quo, vel everti electram ex. Ad solet eligendi cum. Duo ea ferri offendit, eu brute tractatos eos. Eu nec sint habeo aeterno, soleat similique reprimique cum ut, duo mundi iisque voluptaria an. Mea eleifend scriptorem delicatissimi eu. An cum quem constituto vituperatoribus, ceteros salutatus cu eum. Nec eu illud delicatissimi. Bonorum ornatus salutatus mel et. Vis soluta graecis incorrupte ad, modus movet pri ad. Vis ea indoctum gubergren aliquando, ad nulla ubique mei. Tale dolorum adversarium an eum, ea duo tempor tacimates temporibus, vim dolor invenire no. Ad eam agam doctus fierent, nec at nulla nostrud nominavi. Ex platonem consulatu pertinacia vim. Cum consul adolescens interesset eu. Denique albucius menandri ea nam. Nec utinam lobortis ex. Sea singulis urbanitas interesset ne, in est dolorem iracundia intellegebat. Aliquando persecuti scriptorem pri ex, eu everti aperiri eos. Ne per integre rationibus. Eu eum sanctus laboramus reprehendunt, ex mel dicat adolescens deterruisset.</p> 
 

 
<p>Lorem ipsum dolor sit amet, et stet persius iuvaret eam, habemus adipiscing vis et. Ei clita quidam fastidii usu. Id vel tritani adipisci, usu ad recusabo philosophia, in nonumy tempor conceptam eam. Qui solet alienum efficiendi ea, id vis augue lobortis efficiantur, quo et audiam similique. Eos te vocent ponderum, nemore reformidans te cum, pri ei alii minimum adipisci. Vivendum qualisque mea id, nihil deserunt ut pri, pri an falli veniam timeam. Sea ei illud deterruisset, discere facilisi necessitatibus in quo, vel everti electram ex. Ad solet eligendi cum. Duo ea ferri offendit, eu brute tractatos eos. Eu nec sint habeo aeterno, soleat similique reprimique cum ut, duo mundi iisque voluptaria an. Mea eleifend scriptorem delicatissimi eu. An cum quem constituto vituperatoribus, ceteros salutatus cu eum. Nec eu illud delicatissimi. Bonorum ornatus salutatus mel et. Vis soluta graecis incorrupte ad, modus movet pri ad. Vis ea indoctum gubergren aliquando, ad nulla ubique mei. Tale dolorum adversarium an eum, ea duo tempor tacimates temporibus, vim dolor invenire no. Ad eam agam doctus fierent, nec at nulla nostrud nominavi. Ex platonem consulatu pertinacia vim. Cum consul adolescens interesset eu. Denique albucius menandri ea nam. Nec utinam lobortis ex. Sea singulis urbanitas interesset ne, in est dolorem iracundia intellegebat. Aliquando persecuti scriptorem pri ex, eu everti aperiri eos. Ne per integre rationibus. Eu eum sanctus laboramus reprehendunt, ex mel dicat adolescens deterruisset.</p> 
 
    </div> 
 
</div>

Komplettes Beispiel hier: https://jsfiddle.net/pnhywgg0/

Quelle

2016-10-19 20:15:55 veksen

Vielen Dank so muchhhh ...... !! Eine weitere Hilfe benötigt, wie nach Ihrer Lösung in der JSfiddle, wenn Sie klicken Sie auf >> Zeichen auf dem Schieberegler t öffnet die aber die gehackte in der Größe, können wir es auch als die gleiche Höhe wie der Schieberegler div? –

Ungleiche Höhe von zwei Div, nur mit HTML & CSS

Antwort

Verwandte Themen