Làm thế nào để làm cho một div lấp đầy một không gian ngang còn lại?

Tôi có 2 div: một ở bên trái và một ở bên phải trang của tôi. Cái ở bên trái có chiều rộng cố định và tôi muốn một bên phải lấp đầy khoảng trống còn lại.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}

<div id="search">Text</div>
<div id="navigation">Navigation</div>

Điều này dường như để thực hiện những gì bạn đang đi.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

Vấn đề mà tôi tìm thấy với câu trả lời của Boushley là nếu cột bên phải dài hơn bên trái, nó sẽ chỉ quấn quanh bên trái và tiếp tục lấp đầy toàn bộ không gian. Đây không phải là hành vi tôi đang tìm kiếm. Sau khi tìm kiếm thông qua rất nhiều 'giải pháp', tôi đã tìm thấy một hướng dẫn (hiện tại liên kết đã chết) về việc tạo ba trang cột.

Tác giả đưa ra ba cách khác nhau, một chiều rộng cố định, một chiều có ba cột biến đổi và một cách có cột ngoài cố định và chiều rộng giữa có thể thay đổi. Thanh lịch và hiệu quả hơn nhiều so với các ví dụ khác tôi tìm thấy. Cải thiện đáng kể sự hiểu biết của tôi về bố cục CSS.

Về cơ bản, trong trường hợp đơn giản ở trên, thả nổi cột đầu tiên bên trái và cho nó một chiều rộng cố định. Sau đó cung cấp cho cột bên phải lề trái rộng hơn một chút so với cột đầu tiên. Đó là nó. Làm xong. Mã của Ala Boushley:

Đây là bản demo trong Stack Snippets & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

<div id="left">  left  </div>
<div id="right"> right </div>

Với ví dụ của Boushley, cột bên trái giữ cột khác ở bên phải. Ngay khi cột bên trái kết thúc, bên phải bắt đầu lấp đầy toàn bộ không gian một lần nữa. Ở đây, cột bên phải chỉ cần căn chỉnh sâu hơn vào trang và cột bên trái chiếm phần lề lớn. Không có tương tác dòng chảy cần thiết.

Các giải pháp đến từ tài sản hiển thị.

Về cơ bản, bạn cần làm cho hai div hoạt động giống như các ô của bảng. Vì vậy, thay vì sử dụng float:left, bạn sẽ phải sử dụng display:table-celltrên cả hai div và đối với div chiều rộng động bạn cũng cần đặt width:auto;. Cả hai div nên được đặt vào một thùng chứa có chiều rộng 100% với thuộc display:tabletính.

Đây là css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

Và HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

QUAN TRỌNG: Đối với Internet Explorer, bạn cần chỉ định thuộc tính float trên div chiều rộng động, nếu không, không gian sẽ không được lấp đầy.

Tôi hy vọng rằng điều này sẽ giải quyết vấn đề của bạn. Nếu bạn muốn, bạn có thể đọc toàn bộ bài viết tôi đã viết về điều này trên blog của tôi .

Ngày nay, bạn nên sử dụng flexboxphương pháp (có thể được điều chỉnh cho tất cả các trình duyệt có tiền tố trình duyệt).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Thông tin thêm: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Vì đây là một câu hỏi khá phổ biến, tôi có xu hướng chia sẻ một giải pháp hay bằng BFC.
Mẫu Codepen sau đây .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

Trong trường hợp này, overflow: auto kích hoạt hành vi ngữ cảnh và làm cho phần tử bên phải chỉ mở rộng sang chiều rộng còn lại có sẵn và nó sẽ tự nhiên mở rộng thành toàn bộ chiều rộng nếu .leftbiến mất. Một mẹo rất hữu ích và rõ ràng cho nhiều bố cục UI, nhưng có lẽ khó hiểu "lý do tại sao nó hoạt động" lúc đầu.

Nếu bạn không cần khả năng tương thích với các phiên bản cũ hơn của một số trình duyệt nhất định ( ví dụ IE 10 8 trở xuống), bạn có thể sử dụng calc()chức năng CSS:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

Câu trả lời của @ Boushley là gần nhất, tuy nhiên có một vấn đề chưa được giải quyết đã được chỉ ra. Các đúng div mất toàn bộ chiều rộng của trình duyệt; nội dung có chiều rộng dự kiến. Để thấy vấn đề này tốt hơn:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

Nội dung ở đúng vị trí (trong Firefox), tuy nhiên, chiều rộng không chính xác. Khi các phần tử con bắt đầu kế thừa chiều rộng (ví dụ: bảng cówidth: 100% ), chúng được cung cấp chiều rộng bằng với trình duyệt khiến chúng tràn ra bên phải trang và tạo một thanh cuộn ngang (trong Firefox) hoặc không nổi và bị đẩy xuống ( bằng crôm).

Bạn có thể khắc phục điều này một cách dễ dàng bằng cách thêmoverflow: hidden vào cột bên phải. Điều này cung cấp cho bạn chiều rộng chính xác cho cả nội dung và div. Hơn nữa, bảng sẽ nhận được chiều rộng chính xác và điền vào chiều rộng còn lại có sẵn.

Tôi đã thử một số giải pháp khác ở trên, chúng không hoạt động hoàn toàn với các trường hợp cạnh nhất định và quá phức tạp để đảm bảo sửa chúng. Điều này hoạt động và nó đơn giản.

Nếu có bất kỳ vấn đề hoặc mối quan tâm, hãy thoải mái nâng cao chúng.

Dưới đây là một sửa chữa nhỏ cho giải pháp được chấp nhận, ngăn cột bên phải rơi xuống dưới cột bên trái. Thay thế width: 100%;bằng overflow: hidden;một giải pháp khó khăn, nếu ai đó không biết.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[sửa] Cũng kiểm tra một ví dụ cho bố cục ba cột: http://jsfiddle.net/MHeqG/3148/

Nếu bạn đang cố gắng lấp đầy không gian còn lại trong một hộp linh hoạt giữa 2 mục, hãy thêm lớp sau vào một div trống giữa 2 mục bạn muốn tách riêng:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

Sử dụng display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

Câu trả lời của Boushley dường như là cách tốt nhất để sắp xếp việc này bằng cách sử dụng phao. Tuy nhiên, nó không phải là không có vấn đề. Lồng nhau nổi trong phần tử mở rộng sẽ không có sẵn cho bạn; nó sẽ phá vỡ trang.

Phương thức hiển thị về cơ bản là "giả mạo" khi nói đến phần tử mở rộng - nó không thực sự nổi, nó chỉ chơi cùng với các phần tử nổi có chiều rộng cố định bằng cách sử dụng lề của nó.

Vấn đề sau đó chính xác là: phần tử mở rộng không nổi. Nếu bạn thử và có bất kỳ dấu lồng nào được lồng trong phần tử mở rộng, các mục nổi "lồng nhau" đó thực sự không được lồng vào nhau; khi bạn cố gắng dính mộtclear: both; bên dưới các mục nổi "lồng nhau" của mình, cuối cùng bạn cũng sẽ xóa các phao nổi cấp cao nhất.

Sau đó, để sử dụng giải pháp của Boushley, tôi muốn thêm rằng bạn nên đặt một div như sau: .fakeFloat {height: 100%; chiều rộng: 100%; phao: trái; } và đặt nó trực tiếp trong div mở rộng; tất cả nội dung của div được mở rộng sẽ xuất hiện trong phần tử fakeFloat này.

Vì lý do này, tôi khuyên bạn nên sử dụng bảng trong trường hợp cụ thể này. Các phần tử nổi thực sự không được thiết kế để thực hiện việc mở rộng mà bạn muốn, trong khi giải pháp sử dụng bảng là không đáng kể. Một đối số thường được đưa ra là nổi là phù hợp hơn cho bố cục, không phải bảng .. nhưng dù sao bạn cũng không sử dụng nổi ở đây, bạn đang giả mạo nó - và đó là loại đánh bại mục đích của lập luận kiểu cách cho trường hợp cụ thể này, trong Ý kiến ​​khiêm tốn của tôi.

Tôi đã thử các giải pháp trên cho một chất lỏng bên trái, và một bên phải cố định nhưng không phải trong số chúng hoạt động (tôi biết câu hỏi là ngược lại nhưng tôi nghĩ rằng điều này có liên quan). Đây là những gì đã làm việc:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

Tôi đã có một vấn đề tương tự và tôi đã tìm thấy giải pháp ở đây: https://stackoverflow.com/a/16909141/3934886

Giải pháp là cho một cột trung tâm cố định và cột bên lỏng.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

Nếu bạn muốn một cột bên trái cố định, chỉ cần thay đổi công thức cho phù hợp.

Bạn có thể sử dụng các thuộc tính Grid CSS, là cách rõ ràng nhất, rõ ràng và trực quan nhất về cấu trúc các hộp của bạn.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}

<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>

Tôi tự hỏi rằng không ai sử dụng position: absolutevớiposition: relative

Vì vậy, một giải pháp khác sẽ là:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Ví dụ về Jsfiddle

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

Tôi có một giải pháp rất đơn giản cho việc này! // HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Liên kết: http://jsfiddle.net/MHeqG/

Tôi đã có một vấn đề tương tự và đã đưa ra những điều sau đây hoạt động tốt

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Phương pháp này sẽ không bao bọc khi cửa sổ bị thu hẹp nhưng sẽ tự động mở rộng vùng 'nội dung'. Nó sẽ giữ một chiều rộng tĩnh cho menu trang web (bên trái).

Và để tự động mở rộng hộp nội dung và hộp dọc bên trái (menu trang web):

https://jsfiddle.net/tidan/332a6qte/

Hãy thử thêm vị trí relative, loại bỏ widthvà floatcác thuộc tính của phía bên phải, sau đó thêm leftvà thuộc righttính có 0giá trị.

Ngoài ra, bạn có thể thêm margin leftquy tắc với giá trị dựa trên chiều rộng của phần tử bên trái (+ một số pixel nếu bạn cần khoảng trắng ở giữa) để duy trì vị trí của nó.

Ví dụ này làm việc cho tôi:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Thử cái này. Nó làm việc cho tôi.

Tôi đã làm việc với vấn đề này trong hai ngày và có một giải pháp có thể phù hợp với bạn và bất kỳ ai khác đang cố gắng tạo độ rộng Cố định đáp ứng bên trái và có phần bên phải điền vào phần còn lại của màn hình mà không quấn quanh bên trái. Ý định tôi giả định là làm cho trang phản hồi nhanh trong trình duyệt cũng như thiết bị di động.

Đây là mã

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}

/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Đây là câu đố của tôi có thể chỉ làm việc cho bạn như nó đã làm cho tôi. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Quy tắc cho các mặt hàng và container;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Sử dụng khoảng trắng: nowrap; cho các văn bản trong các mục cuối cùng cho việc tái cấu trúc của họ.

Mục X% | Mục Y% | Mục Z%

Tổng chiều dài luôn = 100%!

nếu

Item X=50%
Item Y=10%
Item z=20%

sau đó

Mục X = 70%

Mục X chiếm ưu thế (các mục đầu tiên chiếm ưu thế trong bố cục CSS bảng)!

Hãy thử nội dung tối đa; tài sản cho div bên trong để lan truyền div trong container:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

Giải pháp đơn giản nhất là sử dụng lề. Điều này cũng sẽ được đáp ứng!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

Giải pháp đơn giản nhất là chỉ làm cho chiều rộng div bên trái bằng 100% - chiều rộng của div bên phải cộng với bất kỳ lề nào giữa chúng.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN

Tôi gặp vấn đề tương tự khi cố gắng bố trí một số điều khiển jqueryUI . Mặc dù triết lý phổ biến hiện nay là "sử dụng DIVthay vìTABLE ", tôi thấy trong trường hợp của mình, sử dụng TABLE hoạt động tốt hơn nhiều. Cụ thể, nếu bạn cần căn chỉnh đơn giản trong hai yếu tố (ví dụ: định tâm dọc, định tâm ngang, v.v.), các tùy chọn có sẵn với TABLE cung cấp các điều khiển đơn giản, trực quan cho việc này.

Đây là giải pháp của tôi:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>