Question

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

#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

Answer 1

像这样使用jQuery .height()，

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

$(document).ready(function(){

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

});

希望帮助：）

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

等高内容对齐2绝对div

1 个答案: