Pertanyaan Setel div Tetap ke lebar 100% dari penampung induk


Saya memiliki pembungkus dengan beberapa padding, saya kemudian memiliki div yang mengambang dengan persentase lebar (40%).

Di dalam div yang mengambang mengambang saya memiliki div tetap yang saya ingin ukuran yang sama dengan induknya. Saya mengerti bahwa div yang tetap dihapus dari aliran dokumen dan dengan demikian mengabaikan padding dari pembungkus.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

Berikut adalah biola wajib: http://jsfiddle.net/C93mk/489/

Adakah yang tahu cara untuk mencapai ini?

Saya telah mengubah biola untuk menunjukkan lebih detail tentang apa yang ingin saya capai, maaf atas kebingungannya: http://jsfiddle.net/EVYRE/4/


75
2017-07-23 09:50


asal


Jawaban:


Anda dapat menggunakan margin untuk .wrap container sebagai pengganti padding untuk .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle


39
2017-07-23 10:12



Bagaimana tentang ini?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

Dengan menggunakan jquery Anda dapat mengatur berbagai macam lebar :)

EDIT: Seperti yang dinyatakan oleh mimpi di komentar, menggunakan JQuery hanya untuk efek ini tidak ada gunanya dan bahkan kontra produktif. Saya membuat contoh ini untuk orang-orang yang menggunakan JQuery untuk hal-hal lain di halaman mereka dan mempertimbangkan menggunakannya untuk bagian ini juga. Saya mohon maaf atas ketidaknyamanan yang disebabkan oleh jawaban saya.


2
2017-07-23 09:58



Anda dapat menggunakan pemosisian mutlak untuk menyematkan footer ke basis div induk. Saya juga menambahkan 10px padding-bottom ke bungkus (cocok dengan tinggi footer). Pemosisian absolut relatif terhadap div induk daripada di luar arus karena Anda sudah memberinya atribut relatif posisi.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/


1
2017-07-23 11:15



Coba tambahkan transformasi ke induk (tidak perlu melakukan apa-apa, bisa jadi terjemahan nol) dan atur lebar anak tetap menjadi 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}
<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>


1
2017-12-12 15:09



Di atas yang terakhir Anda jsfiddle, Anda hanya melewatkan satu hal:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

Tapi, bagaimana ini akan menyelesaikan masalah Anda? Sederhana, mari kita jelaskan mengapa lebih besar dari yang diharapkan dulu.

Elemen tetap #sidebar akan menggunakan ukuran lebar jendela sebagai dasar untuk mendapatkan ukurannya sendiri, seperti setiap elemen tetap lainnya, setelah elemen ini didefinisikan width:inherit dan #sidebar_wrap memiliki 40% sebagai nilai lebar, maka akan dihitung window.width * 40%, lalu ketika lebar jendela Anda lebih besar dari Anda .container lebar, #sidebar akan lebih besar dari #sidebar_wrap.

Ini cara, Anda harus menetapkan lebar-maks di Anda #sidebar_wrap, untuk mencegah lebih besar dari #sidebar_wrap.

Periksa ini jsfiddle yang menunjukkan kode yang berfungsi dan menjelaskan lebih baik bagaimana ini bekerja.


0
2017-10-16 20:46



kontainer Anda adalah 40% dari lebar elemen induk

tetapi ketika Anda menggunakan posisi: tetap, lebar didasarkan pada viewport (dokumen) lebar ...

berpikir tentang, saya menyadari elemen induk Anda memiliki 10% padding (kiri dan kanan), itu berarti elemen Anda memiliki 80% dari total halaman total. jadi elemen tetap Anda harus memiliki 40% berdasarkan pada 80% dari total lebar

jadi Anda hanya perlu mengubah kelas #fixed Anda menjadi

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

jika Anda menggunakan sass, postcs atau kompiler css lainnya, Anda dapat menggunakan variabel untuk menghindari pemutusan tata letak ketika Anda mengubah nilai padding elemen induk.

di sini adalah biola yang diperbarui http://jsfiddle.net/C93mk/2343/

saya harap itu membantu, salam


0
2017-12-01 17:50



Menghapus Padding: 10%; atau gunakan px dari pada persen untuk .wrap

lihat contohnya: http://jsfiddle.net/C93mk/493/

HTML:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}

-3
2017-07-23 10:01