等高內容對齊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絕對格

回答

相關問題