Làm cách nào tôi có thể thực hiện width = 100%

153

Trong CSS, làm thế nào tôi có thể làm một cái gì đó như thế này:

width: 100% - 100px;

Tôi đoán điều này khá đơn giản nhưng hơi khó để tìm thấy các ví dụ cho thấy điều đó.

html css

— fmsf
nguồn

1

Câu hỏi stackoverflow.com/questions/11093943/ cho câu trả lời thú vị, nhưng không hoàn toàn tương thích ngược, có lẽ bạn cũng muốn xem qua điều đó.

— 11684

5

Đối với bất kỳ ai vượt qua câu hỏi này, Chad đã trả lời rằng các trình duyệt hiện đại hỗ trợ width: calc(100% - 100px);đó là một vài câu trả lời và tôi hy vọng người hỏi sẽ cập nhật câu hỏi của mình :) :)

— Anders M.

278

Các trình duyệt hiện đại hiện hỗ trợ:

width: calc(100% - 100px);

Để xem danh sách kiểm tra phiên bản trình duyệt được hỗ trợ: Tôi có thể sử dụng calc () làm giá trị đơn vị CSS không?

Có một dự phòng jQuery: chiều rộng css: calc (100% -100px); thay thế bằng cách sử dụng jquery

— Chad
nguồn

13

Tôi tìm thấy khi tôi đang sử dụng, calc(100% - 6px)ví dụ như nó đang hiển thị calc(94%), tôi phải thoát nó như sau và bây giờ nó hoạt độngwidth: calc(~"100% - 6px");

— nsilva

12

Hãy lưu ý, bạn phải có khoảng trắng xung quanh ký tự -(hoặc +). Điều này hoạt động: calc(100% - 100px); Và điều này không:calc(100%-100px);

— rơi tự do vào

Tôi hơi ngạc nhiên khi không có tùy chọn nào để tự động trừ đi 2 lần phần đệm của phần tử, thường sẽ là một usecase khá phổ biến. Ví dụ, tôi cuối cùng phải làm padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);, và sẽ phải thay đổi 0.25emở hai nơi ngay bây giờ nếu nó phải được sửa đổi.

— cnst

Rất cám ơn, cũng muốn lưu ý rằng nó hoạt động để thêm vào: (100% + 100px)

— Viktor Mellgren

99

Bạn có thể lồng một div với margin-left: 50px;và margin-right: 50px;bên trong một <div>với width: 100%;?

— Aric TenEyck
nguồn

4

chiều rộng: calc (100% - 100px); đây là câu trả lời đúng

— Sushan

17

Bạn có thể thử điều này ...

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

Mở rộng đoạn trích

vw: chiều rộng khung nhìn

vh: chiều cao khung nhìn

— barış çıracı
nguồn

Giải pháp đầu tiên là chính xác, container có thể không phải là cửa sổ và do đó 100vh có thể không bằng 100%

— Ben Taliadoros

1

Tôi tìm thấy khi tôi đang sử dụng, calc(100% - 6px)ví dụ như nó đang hiển thị calc(94%), tôi phải thoát nó như sau và bây giờ nó hoạt độngwidth: calc(~"100% - 6px");

— nsilva

4

mã của tôi và nó hoạt động cho 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>

nhập mô tả hình ảnh ở đây

— lbsweek
nguồn

6

Javascript đó để làm gì?

— Faiz

3

Bạn cần có một thùng chứa cho div nội dung của bạn mà bạn muốn là 100% - 100px

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

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

Bạn có thể cần thêm div xóa ngay trước lần cuối </div>nếu div nội dung của bạn bị tràn.

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

— aleemb
nguồn

1

Điều này sẽ không hoạt động. Độ rộng nội dung sẽ là 100%: jsfiddle.net/THERzK/1

— gilly3

2

Đặt lề cơ thể thành 0, chiều rộng của thùng chứa bên ngoài thành 100% và sử dụng một thùng chứa bên trong có lề trái / phải 50px dường như hoạt động.

<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
nguồn

2

Làm việc với các bảng bootstrap, tôi đã tìm cách đặt liên kết "xóa" trong bảng tiêu đề, điều này sẽ không bị che khuất bởi yếu tố hàng xóm dài. Và đây là giải pháp:

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

Tất nhiên, bạn có thể sửa đổi các giá trị "trên cùng" và "đúng", theo cách thụt đầu dòng của bạn. Nguồn

— Artur Đăng nhập
nguồn

2

Nó bắt đầu làm việc cho tôi chỉ khi tôi kiểm tra tất cả các không gian. Vì vậy, nó đã không hoạt động như thế này: width: calc(100%- 20px)hoặc calc(100%-20px)hoàn toàn làm việc với width: calc(100% - 20px).

— Alina Babycheva
nguồn

1

Bạn có thể làm:

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

Chỉnh sửa: Giải pháp của tôi là sai. Giải pháp được đăng bởi Aric TenEyck đề xuất sử dụng div với chiều rộng 100% và sau đó lồng một div khác bằng cách sử dụng lề có vẻ đúng hơn.

— Tina Orooji
nguồn

3

Nếu bạn làm điều này, bạn sẽ không có tổng chiều rộng là 100% + 100px chứ?

— Adam Crume

: o (Tôi xin lỗi. Tôi nên xóa bài viết của mình hay tôi nên để lại bài viết và để số phiếu giảm xuống đẩy nó xuống?

— Tina Orooji

1

bỏ phiếu thường có nghĩa là để khuyến khích bạn làm sạch bài đăng của bạn để bạn có thể lấy lại điểm rep bị mất bởi số phiếu tiêu cực. Nếu bạn biết giải pháp của mình sai, bạn có thể xóa nếu có hoặc không bỏ phiếu hoặc cập nhật nó để làm cho đúng.

— aleemb

@AdamCrume - Không. Đó sẽ chỉ là trường hợp nếu bạn cũng chỉ định width:100%. Một div sẽ tự động điền vào vùng chứa trừ khi bạn ghi đè lên đó, ví dụ, bằng cách chỉ định rõ ràng widthhoặc bằng cách sử dụng floathoặc định vị tuyệt đối. Thêm một lề vào div sẽ chỉ khiến nó điền vào vùng chứa của nó, trừ đi số tiền được chỉ định bởi lề.

— gilly3

@aleemb - Trong trường hợp này, các downvote là của người dùng không hiểu css vì câu trả lời này là hoàn toàn chính xác.

— gilly3

1

Đệm trên div bên ngoài sẽ có được hiệu quả mong muốn.

<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
nguồn

1

Có 2 kỹ thuật có thể có ích cho kịch bản phổ biến này. Mỗi cái đều có nhược điểm nhưng đôi khi có thể hữu ích.

kích thước hộp: hộp viền bao gồm phần đệm và chiều rộng đường viền theo chiều rộng của vật phẩm. Ví dụ: nếu bạn đặt chiều rộng của div với phần đệm 20px 20px và viền 1px thành 100px, chiều rộng thực tế sẽ là 142px nhưng với hộp viền, cả phần đệm và lề đều nằm trong 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;
}

Đây là một bài viết tuyệt vời về nó: http://css-tricks.com/box-sizing/ và đây là một fiddle http://jsfiddle.net/L3Rvw/

Và sau đó là vị trí: tuyệt đối

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

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

Tất nhiên là không hoàn hảo, kích thước hộp không hoàn toàn phù hợp với câu hỏi vì phần tử thực sự có chiều rộng 100%, thay vì 100% - 100px (tuy nhiên sẽ là div con). Và định vị tuyệt đối chắc chắn không thể được sử dụng trong mọi tình huống, nhưng thường là ổn miễn là chiều cao cha mẹ được đặt.

— Dave
nguồn

0

CSS không thể được sử dụng để hoạt hình hoặc bất kỳ sửa đổi kiểu nào trên các sự kiện.

Cách duy nhất là sử dụng hàm javascript, hàm này sẽ trả về chiều rộng của một phần tử đã cho, sau đó, trừ 100px cho nó và đặt kích thước chiều rộng mới.

Giả sử bạn đang sử dụng jQuery, bạn có thể làm một cái gì đó như thế:

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

Và với javascript gốc:

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

Chúng tôi giả định rằng bạn có một kiểu css được thiết lập với 100%;

— Boris Guéry
nguồn

0

Bạn đang sử dụng chế độ tiêu chuẩn? Giải pháp này phụ thuộc vào nó tôi nghĩ.

Nếu bạn đang cố gắng tạo 2 cột, bạn có thể làm một cái gì đó như thế này:

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

Sau đó sử dụng CSS để tạo kiểu cho nó:

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

Nếu bạn không muốn 2 cột, bạn có thể xóa <div id="left">

— hannson
nguồn

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.
nguồn

0

Bạn có thể xem xét bằng cách sử dụng LESS , đây là một tệp JavaScript xử lý trước CSS của bạn để bạn có thể đưa logic và biến vào CSS của mình. Vì vậy, với ví dụ của bạn, trong LESS bạn sẽ viết width: 100% - 100px;để đạt được chính xác những gì bạn muốn :)

— Jon
nguồn

-1

Bạn không thể.

Tuy nhiên, bạn có thể sử dụng lề để tạo ra kết quả tương tự.

— Traingamer
nguồn

-1

Những công việc này:

margin-right:100px;
width:auto;

— người dùng1552559
nguồn

1

Bạn có thể vui lòng thêm một lời giải thích cho câu trả lời của bạn?

— Michał Perłakowski

Tôi đã thử: calc (100% -100px) và kết quả không nhất quán trên tất cả các nền tảng / trình duyệt, sau đó tôi đã cố gắng thực sự đơn giản hóa và sử dụng lề phải: 100px; chiều rộng: tự động; và nó đã hoạt động ...

— user1552559

calc là thành phần CSS3 và css này sẽ hoạt động trên các trình duyệt hỗ trợ CSS3.

— Sushan

-2

Câu trả lời ngắn gọn là bạn KHÔNG làm điều này trong CSS. Internet Explorer có hỗ trợ cho một thứ gọi là CSS Expressions, nhưng điều này không chuẩn và chắc chắn không được hỗ trợ bởi các trình duyệt khác như FireFox.

Bạn nên làm điều này tốt hơn trong JavaScript.

— Praveen Angyan
nguồn

Vâng đoán tôi sẽ phải giữ nó trong javascript, tôi đang khúc xạ một số mã và muốn xóa javascript đang làm điều đó.

— fmsf

1

Xin vui lòng nếu bạn có thể tránh nó không làm điều này trong JavaScript. HTML + CSS có thể khó và giải pháp có thể không rõ ràng, nhưng nó có thể làm hầu hết mọi thứ bạn cần. Sử dụng JavaScript cho bố cục tĩnh hầu như luôn là một ý tưởng tồi.

— Nicole

Làm cách nào tôi có thể thực hiện width = 100% - 100px trong CSS?