有两个垂直div,左侧div的高度与右div不相等,而我使用了一些位置只是为了创建滑块效果,我认为这是创造问题。任何帮助将不胜感激。
代码如下:
<!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()">>></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"><<</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>
答案 0 :(得分:1)
Flexbox救援!使用flex
shorthand:flex-grow
flex-shrink
flex-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;
}
&#13;
<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>
&#13;
这里有完整的例子: https://jsfiddle.net/pnhywgg0/