个人中心
gpt4 book ai didi

html - 两个 Div 的高度不等，仅使用 HTML 和 CSS

转载 作者：太空宇宙 更新时间：2023-11-04 09:38:15 26 4
gpt4 key购买 nike

有两个垂直 div，左侧 div 与右侧 div 的高度不相等，而我使用了一些位置只是为了创建 slider 效果，我认为这是造成问题的地方。任何帮助将不胜感激。

代码如下:

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

最佳答案

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;
}
<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/

关于html - 两个 Div 的高度不等，仅使用 HTML 和 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40139798/

26 4 0
文章推荐： java - SimpleDateFormat 和基于区域设置的格式字符串
文章推荐： java - 为什么我在 Java 中收到 javafx.fxml.LoadException
文章推荐： java - 从java中的列表中获取一行而不是三行？
文章推荐： javascript - 当翻译 :scale is applied? 时，我如何计算出 div 移动了多少
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com