Html 当存在垂直水平线时，高度不是100%_Html_Css

Html 当存在垂直水平线时，高度不是100%

html css

Html 当存在垂直水平线时，高度不是100%,html,css,Html,Css,我有个问题我已经做了一个基本的布局，问题是高度：100%的边栏和包装不适应实际高度基本上这就是布局 <div class="sidebar collapse"> <div class="sidebar-header"> <div class="user"></div> </div> <hr> <div class="sidebar-menu"> <h5>Men&am

我有个问题

我已经做了一个基本的布局，问题是高度：100%的边栏和包装不适应实际高度

基本上这就是布局

<div class="sidebar collapse">
  <div class="sidebar-header">
    <div class="user"></div>
  </div>
  <hr>
  <div class="sidebar-menu">
    <h5>Men&ugrave;</h5>
    <a href="#" class="icon-conten">Contenuti</a>
    <div class="submenu">
      <a href="#">Men&ugrave;</a>
      <a href="#">Barra laterale</a>
      <a href="#">Footer</a>
    </div>
    <a href="#" class="icon-config">Configurazione</a>
  </div>
</div>

<div class="wrapper">
    <a href="#" class="box page-toggle"><i class="fas fa-ellipsis-v"></i></a>
    <div class="page-title box">
      Title
    </div>
  <div class="page-content box">
      Content
  </div>
</div>

我做这支笔是为了更好地解释这个问题……）

我认为你应该在设计中使用flex，而不是绝对定位你的div。在codepen上查看我的版本

谢谢，但这样的话，问题仍然存在。。。最后，我使用了位置：固定而非绝对使其工作。

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%; }
.sidebar {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: #FFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
  @media (min-width: 800px) {
    .sidebar {
      left: 0 !important; } }

@media (max-width: 800px) {
  .collapse {
    left: -250px; } }

.wrapper {
  background: #EEE;
  position: absolute;
  width: calc(100% - 250px);
  height: 100%;
  top: 0;
  right: 0;
  padding: 20px; }
  @media (max-width: 800px) {
    .wrapper {
      width: 100%; } }
  .wrapper .box {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }

<body>
<div class="container">
<div class="sidebar collapse">
  <div class="sidebar-header">
    <img src="http://via.placeholder.com/300x300" alt="...">
    <div class="user">User</div>
  </div>
  <hr>
  <div class="sidebar-menu">
    <h5>Men&ugrave;</h5>
    <a href="#" class="icon-conten">Contenuti</a>
    <div class="submenu">

      <a href="#">Men&ugrave;</a>
      <a href="#">Barra laterale</a>
      <a href="#">Footer</a>

    </div>
    <a href="#" class="icon-config">Configurazione</a>
  </div>
</div>

<div class="wrapper">
    <a href="#" class="box page-toggle"><i class="fas fa-ellipsis-v"></i></a>
    <div class="page-title box">
      Title
    </div>
  <div class="page-content box">

    <h1>Lorem ipsum dolor</h1><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br /><br />
<h2>Lorem ipsum dolor</h2><br /><br />
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><ul><li>Lorem ipsum dolor sit amet</li><li>consectetur adipiscing elit</li></ul><h3>Lorem ipsum dolor</h3><ol><li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li><li>Ut enim ad minim veniam</li></ol><h4>Lorem ipsum dolor</h4><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br />


  </div>
</div>
  </div>
</body>
</html>

$sidebar-width: 250px;
$padding: 20px;

// colori
$primary: #ff9800;
$primary-l1: #ffad33;
$primary-l2: #ffc266;
$primary-l3: #ffd699;
$primary-l4: #ffebcc;
$primary-l5: #fff9f0;
$primary-d1: #e68a00;
$primary-d2: #cc7a00;
$primary-d3: #b36b00;
$primary-d4: #995c00;
$primary-d5: #804d00;

// sfondi
$bg-dark: #333;
$bg-light: #FFF;
$bg-wrapper: #EEE;

// colori testi
$text-on-dark: $primary-l5;
$text-on-light: $primary-d5;

// breakpoints
$breakpoint: 800px;

@mixin box-shadow {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*{
    transition: all 0.2s ease-out;
}

html,body{
    margin: 0px;
    padding:0px;
    width:100%;
    height:100%;
}

body{
    font-family: "Ubuntu", Arial, sans-serif;
    font-size:16px;
}
.container {
  display: flex;
}
h1, h2, h3, h4, h5, h6{
    margin:0px;
    margin-bottom: $padding;
    padding:0px;
}
h1{ font-size: 30px }
h2{ font-size: 26px }
h3{ font-size: 24px }
h4{ font-size: 22px }
h5{ font-size: 20px }
h6{ font-size: 18px }

hr{
    padding:0px;
    margin:$padding 0px;
    border:0px;
    border-bottom:1px solid #666;
    opacity: 0.2;
}

.sidebar{
    width:$sidebar-width;
    height:100%;
    background: $bg-light;
    @include box-shadow;
}
.collapse{
    @media (max-width:$breakpoint){
        left:- $sidebar-width;
    }

}
.wrapper{
    background:$bg-wrapper;
    width: calc(100% - #{$sidebar-width});
    height: 100%;
    padding:$padding;
    @media (max-width:$breakpoint){
        width:100%;
    }
    .box{
        background:#fff;
        padding:$padding;
        margin-bottom:$padding;
        @include box-shadow;
    }
}
.page-title{
    font-size:1.2em;
    font-weight:500;
    &:first-letter{
        color:$primary;
    }
}

.page-toggle{
    display:none;
    font-size:1.2em;
    color:$primary;
    &:hover{
        color:#000;
        background:$primary;
    }
}

@media (max-width:$breakpoint){
    .page-title{
        display:block;
        margin-left:50px + $padding;
    }
    .page-toggle{
        width:50px;
        text-align:center;
        float:left;
        display:inline-block;
    }
}

.sidebar-header{
    padding:$padding 0px 0px;
    text-align: center;
    img{
        margin:0px auto 5px;
        width:50px;
        height:auto;
        border:0px;
        border-radius:50%;
        display:block;
    }
    .user{
        letter-spacing:2px;
        font-variant:small-caps;
        text-transform: capitalize;
        font-size:1.2em;
        font-weight:700;
        &::first-letter{
            color:$primary;
        }
    }
}
.sidebar-menu{
    h5{
        padding:0px $padding;
    }
    a{
        padding:10px $padding;
        display:block;
        color:#000;
        text-decoration: none;
        font-weight: 500;
        &:hover{
            background:$primary;
            &::before{
                color:#000;
            }
        }
        &::before{
            font-family:"Font Awesome 5 Free";
            font-weight:900;
            padding-right:10px;
            color:$primary;

        }
    }
    >.link-active{
        background: $primary;
        font-size:1.1em;
        &::before{
            color:#000 !important;
        }
    }
}
.submenu{
    display:none;
    font-size:0.9em;
    background:$primary-l4;
    a{
        padding:3px $padding;
        &:hover{
            background:$primary-l1;
        }
        &::before{
            content:"\f105";
            margin-left:3px;
            padding-right:13px;
        }
    }
}

.icon-conten::before{   content:"\f15c"; }
.icon-config::before{   content:"\f013"; }