Bagaimana saya bisa melakukan width = 100%

153

Di CSS, bagaimana saya bisa melakukan sesuatu seperti ini:

width: 100% - 100px;

Saya kira ini cukup sederhana tetapi agak sulit untuk menemukan contoh yang menunjukkan itu.

html css fmsf
sumber

1

Pertanyaan yang ditautkan stackoverflow.com/questions/11093943/… memberikan jawaban kompatibel yang menarik, tetapi tidak sepenuhnya terbelakang, mungkin Anda juga ingin melihatnya.

11684

5

Bagi siapa pun yang melewati pertanyaan ini, Chad menjawab bahwa peramban modern mendukungnya width: calc(100% - 100px);, beberapa jawaban turun dan saya harap penanya akan memperbarui pertanyaannya :) :)

Anders M.

278

Browser modern sekarang mendukung:

width: calc(100% - 100px);

Untuk melihat daftar versi browser yang didukung, checkout: Dapatkah saya menggunakan calc () sebagai nilai unit CSS?

Ada fallback jQuery: lebar css: calc (100% -100px); alternatif menggunakan jquery

Chad
sumber

13

Saya menemukan ketika saya menggunakan calc(100% - 6px)misalnya itu ditampilkan sebagai calc(94%), saya harus menghindarinya sebagai berikut dan sekarang berfungsiwidth: calc(~"100% - 6px");

nsilva

12

Sadarilah, Anda harus memiliki spasi putih di sekitar karakter -(atau +). Ini berfungsi: calc(100% - 100px); Dan ini tidak:calc(100%-100px);

Freefaller

Saya sedikit terkejut tidak ada pilihan untuk secara otomatis mengurangi 2x padding dari elemen, yang biasanya akan menjadi usecase yang cukup umum. Misalnya, saya akhirnya harus melakukan padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);, dan harus mengubah 0.25emdi dua tempat sekarang jika harus diubah.

cnst

Terima kasih banyak, juga ingin mencatat bahwa ini berfungsi sebagai tambahan: (100% + 100px)

Viktor Mellgren

99

Bisakah Anda membuat sarang dengan margin-left: 50px;dan margin-right: 50px;di dalam <div>dengan width: 100%;?

Aric TenEyck
sumber

4

lebar: calc (100% - 100px); ini jawaban yang benar.

Sushan

17

Anda dapat mencoba ini ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

Luaskan cuplikan

vw: lebar viewport

vh: tinggi viewport

barış çıracı
sumber

Solusi pertama benar, wadah mungkin bukan jendela dan oleh karena itu 100vh mungkin tidak sama dengan 100%

Ben Taliadoros

1

Saya menemukan ketika saya menggunakan calc(100% - 6px)misalnya itu ditampilkan sebagai calc(94%), saya harus menghindarinya sebagai berikut dan sekarang berfungsiwidth: calc(~"100% - 6px");

nsilva

4

kode saya, dan berfungsi untuk IE6:

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

masukkan deskripsi gambar di sini

lbsweek
sumber

6

Untuk apa Javascript itu?

Faiz

3

Anda harus memiliki wadah untuk div konten Anda yang Anda inginkan 100% - 100px

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

Anda mungkin perlu menambahkan div kliring sebelum yang terakhir </div>jika div konten Anda meluap.

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

aleemb
sumber

1

Ini tidak akan berfungsi. Lebar konten akan 100%: jsfiddle.net/cuezK/1

gilly3

2

Mengatur margin tubuh ke 0, lebar wadah luar hingga 100%, dan menggunakan wadah bagian dalam dengan margin kiri / kanan 50px tampaknya berfungsi.

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

tvanfosson
sumber

2

Bekerja dengan panel bootstrap, saya mencari cara menempatkan tautan "hapus" di panel header, yang tidak akan dikaburkan oleh elemen tetangga yang panjang. Dan inilah solusinya:

html:

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

css:

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

Tentu saja Anda dapat memodifikasi nilai "atas" dan "benar", sesuai dengan lekukan Anda. Sumber

Artur Loginov
sumber

2

Itu mulai bekerja untuk saya hanya ketika saya memeriksa semua spasi. Jadi, tidak berfungsi seperti ini: width: calc(100%- 20px)atau calc(100%-20px)dan bekerja dengan sempurna width: calc(100% - 20px).

Alina Babycheva
sumber

1

Bisakah Anda melakukannya:

margin-right: 50px;
margin-left: 50px;

Sunting: Solusi saya salah. Solusi diposting oleh Aric TenEyck menyarankan menggunakan div dengan lebar 100% dan kemudian bersarang div lain menggunakan margin tampaknya lebih benar.

Tina Orooji
sumber

3

Jika Anda melakukan ini, tidakkah Anda akan berakhir dengan total lebar 100% + 100px?

Adam Crume

: o (Maaf. Haruskah saya menghapus posting saya atau haruskah saya meninggalkannya dan membiarkan suara turun menekannya?

Tina Orooji

1

down vote biasanya dimaksudkan untuk mendorong Anda untuk membersihkan posting Anda sehingga Anda bisa mendapatkan kembali poin rep yang hilang oleh suara negatif. Jika Anda tahu solusi Anda salah, Anda dapat menghapus jika dengan atau tanpa suara atau memperbaruinya untuk memperbaikinya.

aleemb

@AdamCrume - Tidak. Itu hanya akan menjadi kasus jika Anda juga menentukan width:100%. Sebuah div akan secara otomatis mengisi wadah kecuali Anda menimpanya, misalnya, dengan menetapkan secara eksplisit width, atau dengan menggunakan floatatau penentuan posisi absolut. Menambahkan margin ke div hanya akan menyebabkannya untuk mengisi wadahnya, dikurangi jumlah yang ditentukan oleh margin.

gilly3

@aleemb - Dalam hal ini, downvotes adalah oleh pengguna yang tidak mengerti css karena jawaban ini sangat tepat.

gilly3

1

Padding pada div luar akan mendapatkan efek yang diinginkan.

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

Josh Bush
sumber

1

Ada 2 teknik yang bisa berguna untuk skenario umum ini. Masing-masing memiliki kekurangan tetapi keduanya dapat berguna pada saat-saat tertentu.

box-sizing: kotak batas termasuk padding dan lebar perbatasan di lebar item. Misalnya, jika Anda mengatur lebar div dengan bantalan 20px 20px dan batas 1px ke 100px, lebar sebenarnya adalah 142px tetapi dengan kotak batas, kedua bantalan dan margin berada di dalam 100px.

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

Berikut ini adalah artikel yang sangat bagus: http://css-tricks.com/box-sizing/ dan inilah biola http://jsfiddle.net/L3Rvw/

Dan kemudian ada posisi: absolut

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

Tidak ada yang sempurna tentu saja, ukuran kotak tidak benar-benar cocok dengan pertanyaan karena elemen sebenarnya 100% lebar, daripada 100% - 100px (namun div anak akan). Dan penentuan posisi absolut jelas tidak dapat digunakan dalam setiap situasi, tetapi biasanya baik-baik saja selama ketinggian induk ditetapkan.

Dave
sumber

0

CSS tidak dapat digunakan untuk animasi, atau modifikasi gaya apa pun pada acara.

Satu-satunya cara adalah dengan menggunakan fungsi javascript, yang akan mengembalikan lebar elemen yang diberikan, kemudian, kurangi 100px untuk itu, dan atur ukuran lebar baru.

Dengan asumsi Anda menggunakan jQuery, Anda bisa melakukan sesuatu seperti itu:

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

Dan dengan javascript asli:

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

Kami berasumsi bahwa Anda memiliki gaya css yang diatur dengan 100%;

Boris Guéry
sumber

0

Apakah Anda menggunakan mode standar? Solusi ini tergantung padanya, saya pikir.

Jika Anda mencoba membuat 2 kolom, Anda bisa melakukan sesuatu seperti ini:

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

Kemudian gunakan CSS untuk menatanya:

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

Jika Anda tidak ingin 2 kolom, Anda mungkin dapat menghapus <div id="left">

hannson
sumber

0

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

RC.
sumber

0

Anda dapat melihat menggunakan KURANG , yang merupakan file JavaScript yang pra-proses CSS Anda sehingga Anda dapat memasukkan logika dan variabel ke dalam CSS Anda. Jadi sebagai contoh, di KURANG Anda akan menulis width: 100% - 100px;untuk mencapai apa yang Anda inginkan :)

Jon
sumber

-1

Kamu tidak bisa

Namun, Anda dapat menggunakan margin untuk menghasilkan hasil yang sama.

Traingamer
sumber

-1

Ini bekerja:

margin-right:100px;
width:auto;

pengguna1552559
sumber

1

Bisakah Anda menambahkan penjelasan pada jawaban Anda?

Michał Perłakowski

Saya sudah mencoba: calc (100% -100px) dan hasilnya tidak konsisten di semua platform / browser, kemudian saya mencoba untuk benar-benar menyederhanakan dan menggunakan margin-right: 100px; lebar: otomatis; dan itu berhasil ...

user1552559

calc adalah komponen CSS3 dan css ini akan berfungsi pada browser yang mendukung CSS3.

Sushan

-2

Jawaban singkatnya adalah Anda TIDAK melakukan ini dalam CSS. Internet Explorer memiliki dukungan untuk sesuatu yang disebut Ekspresi CSS, tetapi ini bukan standar dan jelas tidak didukung oleh browser lain seperti FireFox misalnya.

Anda sebaiknya melakukan ini dalam JavaScript.

Praveen Angyan
sumber

Ya kira saya harus tetap menyimpannya di javascript, saya refractoring beberapa kode dan ingin menghapus javascript yang melakukan itu tks.

fmsf

1

Silakan jika Anda dapat menghindarinya jangan lakukan ini di JavaScript. HTML + CSS mungkin rumit dan solusinya mungkin tidak jelas, tetapi kemungkinan dapat melakukan hampir semua yang Anda butuhkan. Menggunakan JavaScript untuk tata letak statis hampir selalu merupakan ide yang buruk.

Nicole

Bagaimana saya bisa melakukan width = 100% - 100px dalam CSS?

Jawaban: