等高内容对齐2绝对格

-1

我在右侧使用了100vh，并且这两个div位置都是absoulute。不确定这是构建仪表板布局的最佳方式。我的问题是，左侧边栏似乎没有遵循正确的内容长度。我也尝试过100％。等高内容对齐2绝对格

#sidebar { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100px; 
 
    background: blue; 
 
    color: #fff; 
 
    height: 100vh 
 
} 
 

 
body { 
 
    margin: 0 
 
} 
 

 
li { 
 
    padding: 0; 
 
    list-style: none; 
 
    margin: 0; 
 
} 
 

 
#content { 
 
    background: #DDD; 
 
    margin-left: 100px; 
 
    width: 100%; 
 
}

<div id="sidebar"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</div> 
 

 
<div id="content"> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
</div>

https://jsbin.com/desutovosi/edit?html,css,output

来源

2017-02-22 Alex Yong

-1

使用jQuery .height()这样，

var contentHeight = $('#content').height(); 

$(document).ready(function(){ 

    $('#sidebar').height(contentHeight); 

});

希望帮助:)

var contentHeight = $('#content').height(); 
 

 
$(document).ready(function(){ 
 
    $('#sidebar').height(contentHeight); 
 
});

#sidebar{ 
 
    position:absolute; 
 
    left:0; 
 
    width:100px; 
 
    background:blue; 
 
    color:#fff; 
 
} 
 

 
body{margin:0} 
 

 
li{ 
 
    padding:0; 
 
    list-style:none; 
 
    margin:0; 
 
} 
 

 
#content{ 
 
    background:#DDD; 
 
    margin-left:100px; 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div id="sidebar"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </div> 
 
    
 
    <div id="content"> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    </div> 
 
    
 
</body>

来源

2017-02-22 08:09:20 GuaHsu

呃，这是一个肮脏的黑客:( –

我是新的代码，你能告诉我这办法脏？谢谢:)！ – GuaHsu

-1

包裹代码外DIV中，在这种情况下容器

修改后的代码：


 
.container { 
 
    background-color: blue; 
 
} 
 
#sidebar{ 
 
    position:absolute; 
 
    left:0; 
 
    width: 100px; 
 
    background:transparent; 
 
    color: #fff; 
 
    height: 100vh 
 
} 
 
body{ 
 
    margin:0. 
 
} 
 
li{ 
 
    padding:0; 
 
    list-style:none; 
 
    margin:0; 
 
} 
 
#content{ 
 
    background:#DDD; 
 
    margin-left:100px; 
 
    width:100%; 
 
}

<body> 
 
    <div class="container"> 
 
    <div id="sidebar"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
    </div> 
 
    <div id="content"> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
     <p>Content goes here</p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-02-22 08:23:06

是所有？这是我错过的唯一的事情？ –

@Alex yes ..你的代码很好，只需要稍作修改即可。 –

position:absolute元件采取parent元素的height,#content将增加.app的height和#sidebar自动将100%height的.app。

html, 
 
body { 
 
    height: 100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
*{ 
 
    box-sizing:border-box; 
 
} 
 
.app{ 
 
    position:relative; 
 
    min-height:100vh; 
 
    float:left; 
 
    width:100%; 
 
} 
 
#sidebar { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100px; 
 
    background: blue; 
 
    color: #fff; 
 
    min-height: 100vh; 
 
    height:100%; 
 
} 
 
#content { 
 
    background: #DDD; 
 
    padding-left: 100px; 
 
    width: 100%; 
 
    float:left; 
 
    min-height:100vh; 
 
} 
 
ul,li { 
 
    padding: 0; 
 
    list-style: none; 
 
    margin: 0; 
 
}

<div class=app> 
 
    <div id="sidebar"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </div> 
 

 
    <div id="content"> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    </div> 
 
</div>

来源

2017-02-22 08:38:19

等高内容对齐2绝对格

回答

相关问题