Div chiều rộng 100% trừ đi số lượng pixel cố định

Làm cách nào tôi có thể đạt được cấu trúc sau mà không cần sử dụng bảng hoặc JavaScript? Các viền trắng đại diện cho các cạnh của div và không liên quan đến câu hỏi.

Kích thước của khu vực ở giữa sẽ thay đổi, nhưng nó sẽ có các giá trị pixel chính xác và toàn bộ cấu trúc nên chia tỷ lệ theo các giá trị đó. Để đơn giản hóa, tôi cần một cách để đặt chiều rộng "100% - n px" thành các div trên cùng và giữa-dưới.

Tôi đánh giá cao một giải pháp đa trình duyệt sạch, nhưng trong trường hợp không thể, các hack CSS sẽ làm được.

Đây là một phần thưởng. Một cấu trúc khác mà tôi đã đấu tranh và kết thúc bằng cách sử dụng các bảng hoặc JavaScript. Nó hơi khác một chút, nhưng giới thiệu những vấn đề mới. Tôi chủ yếu sử dụng nó trong hệ thống cửa sổ dựa trên jQuery, nhưng tôi muốn giữ bố cục ngoài kịch bản và chỉ kiểm soát kích thước của một phần tử (phần giữa).

Bạn có thể sử dụng các yếu tố lồng nhau và phần đệm để có được cạnh trái và phải trên thanh công cụ. Chiều rộng mặc định của mộtdiv phần tử làauto , có nghĩa là nó sử dụng chiều rộng có sẵn. Sau đó, bạn có thể thêm phần đệm vào phần tử và nó vẫn giữ trong chiều rộng có sẵn.

Dưới đây là một ví dụ mà bạn có thể sử dụng để đặt hình ảnh làm góc tròn trái và phải và hình ảnh trung tâm lặp lại giữa chúng.

HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

Cách mới tôi vừa vấp ngã: csscalc() :

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

Nguồn: chiều rộng css 100% trừ 100px

Mặc dù câu trả lời của Guffa hoạt động trong nhiều tình huống, trong một số trường hợp, bạn có thể không muốn phần đệm bên trái và / hoặc bên phải là cha mẹ của div trung tâm. Trong những trường hợp này, bạn có thể sử dụng bối cảnh định dạng khối ở trung tâm và thả nổi các div đệm vào bên trái và bên phải. Đây là mã

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

Tôi cảm thấy hệ thống phân cấp thành phần này tự nhiên hơn khi so sánh với các div lồng nhau, và thể hiện tốt hơn những gì trên trang. Bởi vì điều này, đường viền, phần đệm và lề có thể được áp dụng bình thường cho tất cả các yếu tố (ví dụ: 'tính tự nhiên' này vượt xa phong cách và có sự phân nhánh).

Lưu ý rằng điều này chỉ hoạt động trên div và các yếu tố khác có chung thuộc tính 'lấp đầy 100% chiều rộng'. Đầu vào, bảng và có thể những người khác sẽ yêu cầu bạn bọc chúng trong div container và thêm một chút css để khôi phục chất lượng này. Nếu bạn không may mắn trong tình huống đó, hãy liên hệ với tôi và tôi sẽ đào css.

jsfiddle tại đây: jsfiddle.net/RgdeQ

Thưởng thức!

Bạn có thể sử dụng bố trí Flexbox . Bạn cần đặt flex: 1trên phần tử cần có chiều rộng hoặc chiều cao động flex-direction: row and columntương ứng.

Độ rộng động:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

Đầu ra:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

Chiều cao động:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

Đầu ra:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

Cách thông thường để làm điều đó được vạch ra bởi Guffa, các yếu tố lồng nhau. Thật là một chút buồn khi phải thêm đánh dấu bổ sung để có được các hook bạn cần cho việc này, nhưng trên thực tế, một div Wrapper ở đây hoặc sẽ không làm tổn thương bất cứ ai.

Nếu bạn phải làm điều đó mà không có các yếu tố bổ sung (ví dụ: khi bạn không có quyền kiểm soát đánh dấu trang), bạn có thể sử dụng kích thước hộp , có hỗ trợ trình duyệt khá tốt nhưng không đầy đủ hoặc đơn giản. Có khả năng vui hơn là phải dựa vào kịch bản.

Có lẽ tôi đang bị câm, nhưng không phải là giải pháp rõ ràng ở đây?

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

Một cách khác mà tôi đã tìm ra trong chrome thậm chí còn đơn giản hơn, nhưng con người là nó là một hack!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

Điều này một mình sẽ lấp đầy phần còn lại của dòng theo chiều ngang, như các ô bảng làm. Tuy nhiên, bạn nhận được một số vấn đề lạ với nó vượt quá 100% cha mẹ của nó, đặt chiều rộng thành giá trị phần trăm sẽ khắc phục nó.

Chúng ta có thể đạt được điều này bằng cách sử dụng flex-box rất dễ dàng.

Nếu chúng ta có ba yếu tố như Header, MiddleContainer và Footer. Và chúng tôi muốn cung cấp một số chiều cao cố định cho Header và Footer. sau đó chúng ta có thể viết như thế này:

Đối với React / RN (mặc định là 'display' là flex và 'flexDirection' dưới dạng cột), trong web css, chúng ta sẽ phải chỉ định thùng chứa hoặc thùng chứa có chứa những thứ này như hiển thị: 'flex', flex-direction: 'cột' như dưới đây:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

Điều gì xảy ra nếu div gói của bạn là 100% và bạn đã sử dụng phần đệm cho số lượng pixel, thì nếu phần đệm # cần phải động, bạn có thể dễ dàng sử dụng jQuery để sửa đổi số lượng phần đệm của mình khi sự kiện diễn ra.

Tôi gặp vấn đề tương tự khi tôi muốn một biểu ngữ trên đầu màn hình có một hình ảnh bên trái và hình ảnh lặp lại ở bên phải đến cạnh màn hình. Tôi cuối cùng đã giải quyết nó như vậy:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

Chìa khóa là thẻ đúng. Về cơ bản, tôi xác định rằng tôi muốn nó lặp lại từ 131px từ bên trái sang 0px từ bên phải.

Trong một số bối cảnh, bạn có thể tận dụng cài đặt lề để chỉ định hiệu quả "100% chiều rộng trừ N pixel". Xem câu trả lời được chấp nhận cho câu hỏi này .