等しい高さの内容アラインメント2アブソリュートdiv

-1

私は右側に100vhを使用し、両方の位置absuluteを使用しました。これがダッシュボードレイアウトを構築する最善の方法であるとは思わない。私の問題は、左側のサイドバーが右側の内容の長さに従っていないように見えることです。私も100％試しました。等しい高さの内容アラインメント2アブソリュートdiv

#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はい..ちょっとした変更が必要でした。 –

position:absolute要素はを取り要素のheight、#contentは自動的に.appのでしょう100%heightを.appのheightと#sidebarが増加します。

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アブソリュートdiv

答えて

関連する問題