CSS
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}
.sidebar{
width: 5%;
display: inline;
height: 100%;
float: left;
background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
font-size: 0.5em;
position: absolute;
bottom: 0;
left: 0;
}
Sekarang tata letak saya terlihat seperti ini:
Dan saya ingin terlihat seperti ini:
Saya mengikuti panduan yang ditawarkan di kemungkinan duplikat dan itu tidak membantu
Saya pikir ini karena saya menggunakan floats
dan fluid layout
.
Bagaimana saya bisa memperpanjang kolom sambil menjaga tata letak fluid
dan posisi float
.
Saya telah memperbarui kode Anda. Lihat di Plunker.
Pada awalnya cobalah untuk tidak menggunakan posisi absolute
atau relative
, jika tidak diperlukan.
Yang kedua, dalam kasus Anda dengan memberikan gaya display: inline
dan float: left
, melakukan hal yang sama, jadi cukup gunakan yang terakhir saja.
Selain itu, saya telah mengatur height
tag HTML
dan BODY
menjadi 100% dan melakukan hal yang sama untuk sidebar
dan content
DIV
, sehingga mereka akan memenuhi
tinggi parent`` (
body`).
Dan akhirnya, salah satu masalah Anda adalah nilai repeat-y
dari properti background
. Itu tidak diulang pada sumbu x, jadi anda tidak melihat ukuran sebenarnya dari DIV
. Saya baru saja mengaturnya ke repeat
bukan repeat-y
.
Cobalah sesuatu seperti ini:
[BIOLA][1]
<h1>Hello Plunker!</h1>
<div class="container">
<div class="sideBar">sideBar</div>
<div class="content">content</div>
</div>
*
{
margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
height: 100%;
}
h1
{
height: 50px;
line-height: 50px;
}
.container
{
margin-top: -50px;
padding-top: 50px;
box-sizing: border-box;
}
.sideBar
{
float:left;
width: 100px;
background: aqua;
}
.content
{
overflow:hidden;
background: yellow;
}