不等於兩個Div的高度，只使用HTML＆CSS

有兩個垂直div，左邊的div高度不等於右div，而我用一些位置只是爲了創建滑塊效果，我認爲這是創建問題。任何幫助將不勝感激。不等於兩個Div的高度，只使用HTML＆CSS

代碼如下：

<!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>

來源

2016-10-19 abhishek kumar

你的意思是右邊的文本不是頂部？當我運行它時很好 –

您的意思是滑塊內容與摺疊滑塊的高度不一樣嗎？ – veksen

爲了澄清，我只是想顯示與左側內容div（Lorum Ipsum）相同高度的背景顏色的左側div。 –

Flexbox的救援！使用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>

完整的例子在這裏： https://jsfiddle.net/pnhywgg0/

來源

2016-10-19 20:15:55 veksen

謝謝你這麼多...... !! 需要一個更多的幫助，就像你在jsfiddle中的解決方案一樣，當你點擊滑塊t上的>>符號時，打開的是大小的碎片，我們也可以使它與滑塊的高度相同DIV？ –

不等於兩個Div的高度，只使用HTML＆CSS

回答

相關問題