div를 나머지 수평 공간으로 채우는 방법은 무엇입니까?

419

내 페이지의 왼쪽과 오른쪽에 각각 하나씩 2 개의 div가 있습니다 . 왼쪽의 너비는 고정되어 있으며 오른쪽의 나머지 공간을 채우고 싶습니다.

#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>
스 니펫 확장

html  css  width  responsive 
— 알렉 첸코
소스
11
#navigation에서 width 및 float 속성을 제거하면 작동합니다.
— Johan Leino 2016 년
— Adrien Be에
1
@ alexchenco : 선택한 답변을 Hank
— Adrien이
@Adrien 실제로 mystrdat의 답변을 보면 하나가 더 좋다고 생각합니다. 그것은 단지 한 줄의 CSS이고 그것은 나를 위해 일한 유일한 것입니다 (float : left로 세 개의 열을 만들고 있습니다. 첫 번째는 고정 너비와 overflow : auto는 마지막
— 것에서
@edwardtyl 공정합니다. 실제로, 그것은 stackoverflow.com/questions/4873832/에
— Adrien Be

답변:

71

이것은 당신이하려는 것을 성취하는 것 같습니다.

#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>
스 니펫 확장

— 부쉬
소스
8
오른쪽 div에서 너비를 100 % 제거해야 작동합니다.
— Johan Leino 2016 년
250
이 솔루션에는 실제로 문제가 있습니다. LEFT 요소에서 색상을 제거하십시오. RIGHT 요소의 색상이 실제로 그 아래에 숨겨져 있음을 알 수 있습니다. 콘텐츠가 올바른 위치로 이동하는 것처럼 보이지만 오른쪽 div 자체는 그렇지 않습니다.
— Vyrotek
5
+1 내 문제도 해결했다. 내가 배운 것은 충전 div에서 "float : left"를 제거해야한다는 것입니다. 그 페이지 내파을 할 것이라고 생각
— 사람 Keyser
12
Vyroteks의 말은 사실이지만 , 오른쪽 열에 overflow : hidden 으로 해결할 수 있습니다 . Denzel은 이것을 언급하지만, 그의 대답은 받아 들여지지 않기 때문에 당신은 그것을 놓칠 수 있습니다.
— Ruudt
45
이것은 분명히 잘못되었습니다. 오른쪽 요소는 전체 크기이며 왼쪽 요소 주위에 내용이 떠 있습니다. 이것은 해결책이 아니며 더 많은 혼란입니다.
— mystrdat
268

Boushley의 대답에서 찾은 문제는 오른쪽 열이 왼쪽보다 길면 왼쪽을 감싸서 전체 공간을 채우는 것입니다. 이것은 내가 찾던 행동이 아닙니다. 많은 '솔루션'을 검색 한 후 세 개의 열 페이지를 만드는 방법에 대한 자습서 (현재 링크가 죽었습니다)를 발견했습니다.

저자는 세 가지 방법, 즉 하나의 고정 너비, 하나는 가변 열 세 개, 다른 하나는 고정 외부 열과 가변 너비 중간 세 가지를 제공합니다. 내가 찾은 다른 예보다 훨씬 우아하고 효과적입니다. CSS 레이아웃에 대한 이해가 크게 향상되었습니다.

기본적으로 위의 간단한 경우 첫 번째 열을 왼쪽으로 띄우고 고정 너비를 지정하십시오. 그런 다음 오른쪽 열에 첫 번째 열보다 약간 넓은 왼쪽 여백을 지정하십시오. 그게 다야. 끝난. Ala Boushley의 코드 :

다음은 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>
스 니펫 확장

Boushley의 예에서 왼쪽 열은 다른 열을 오른쪽으로 유지합니다. 왼쪽 열이 끝나 자마자 오른쪽 공간 전체가 다시 채워지기 시작합니다. 여기서 오른쪽 열은 단순히 페이지에 더 정렬되고 왼쪽 열은 큰 뚱뚱한 여백을 차지합니다. 흐름 상호 작용이 필요하지 않습니다.

— 다발
소스
div 태그를 닫으면 해당 div 이후의 내용이 새 줄에 표시되어야하지만 일어나지 않습니다. 이유를 설명해 주시겠습니까?
— fuddin
마진-왼쪽 : 190px; 당신은 잊었 ';'. 또한 왼쪽 여백은 180 픽셀이어야합니다.
— fuddin
4
참고 : 고정 너비 요소를 오른쪽에 배치하려면 코드에서 먼저 배치해야합니다. 그렇지 않으면 다음 행으로 푸시됩니다.
— Trevor
2
@RoniTovi, 부동 요소는 HTML에서 부동 요소보다 앞에 와야합니다. jsfiddle.net/CSbbM/127
— 행크
6
고정 너비를 피하려면 어떻게해야합니까? 즉, 왼쪽 열은 필요한만큼만 넓히고 나머지 열은 나머지를 차지할 수 있습니까?
— Patrick Szalapski
126

해결책은 디스플레이 속성에서 비롯됩니다.

기본적으로 두 div가 테이블 셀처럼 작동하도록해야합니다. 따라서을 사용하는 대신 두 div 모두 float:left를 사용해야 display:table-cell하고 동적 너비 div width:auto;도 설정해야합니다 . 두 div 모두 display:table속성이 있는 100 % 너비 컨테이너에 배치해야합니다 .

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

그리고 HTML :

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

중요 : Internet Explorer의 경우 동적 너비 div에 float 속성을 지정해야합니다. 그렇지 않으면 공간이 채워지지 않습니다.

이것이 귀하의 문제를 해결하기를 바랍니다. 원하는 경우 내 블로그 에서 내가 작성한 전체 기사를 읽을 수 있습니다 .

— 미하이 프렌 티우
소스
3
width : auto 인 div 내부의 내용이 뷰포트에서 사용할 수있는 나머지 공간보다 큰 경우 작동하지 않습니다.
— Nathan Loyer
4
@einord,이 솔루션은 테이블을 사용하지 않으며 테이블은 테이블 형식의 데이터에만 사용해야한다는 것을 알고 있습니다. 따라서 여기에는 맥락이 없습니다. 실제 테이블과 display : table (+ other variant) 속성은 완전히 다릅니다.
— Mihai Frentiu
1
@Mihai Frentiu, display : table은 실제 테이블 요소와 다른 점은 무엇입니까? 나는 그들이 완전히 다른 것들이라면 이것을 정말로 배우고 싶습니다. 감사합니다. =)
— einord
2
@einord, HTML 테이블을 사용한다는 것은 HTML 코드에서 전체 테이블 구조의 정의를 의미합니다. CSS 테이블 모델을 사용하면 전체 테이블 트리를 정의하지 않고도 거의 모든 요소를 ​​테이블 요소처럼 동작시킬 수 있습니다.
— Mihai Frentiu
1
@Mihai Frentiu, 답변 주셔서 감사합니다. 그러나 테이블을 디자인 요소로 사용하는 데있어 문제의 절반이 테이블 요소의 동작이 아닙니까?
— einord
123

요즘에는이 flexbox방법을 사용해야합니다 (브라우저 접두사가있는 모든 브라우저에 적용될 수 있음).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

자세한 정보 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

— 요르단
소스
CSS 속성에 대한 자세한 설명은 www.w3schools.com/cssref/css3_pr_flex-grow.asp를 참조하십시오. 간단한 최신 솔루션이지만 이전 브라우저에서는 작동하지 않을 수 있습니다.
— Edward
4
Flexbox FTW ... 나는이 스레드에서 다른 모든 솔루션을 시도했지만 아무것도 작동하지 않습니다.이 flexbox 솔루션을 시도해보십시오. 즉시 작동합니다 ... 클래식 CSS (즉, flexbox와 CSS 그리드가 출현하기 전에)는 레이아웃에서 완전히 짜증납니다. ... 플렉스 및 그리드 규칙 :-)
— leo
현재 시간에 대해 선택된 솔루션으로 승인해야합니다. 또한 유일하게 "해킹되지 않은"솔루션입니다.
— 그렉
이것은 하루를 아끼는 매력처럼 작동합니다!
— lisnb
tsbaa (이것은 정답입니다)
— Ryo
104

이것은 다소 인기있는 질문이므로 BFC를 사용하여 멋진 솔루션을 공유하는 경향이 있습니다.
다음의 코드 펜 샘플은 여기 입니다.

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

이 경우 overflow: auto컨텍스트 동작을 트리거하고 올바른 요소 를 사용 가능한 나머지 너비 로만 확장하고 자연스럽게 전체 너비로.left 사라지면 . 많은 UI 레이아웃에 유용하고 깔끔한 트릭이지만 처음에는 "왜 작동하는지"를 이해하기 어려울 수 있습니다.

— Mystrdat
소스
1
오버 플로우에 대한 브라우저 지원 IE4 !!! w3schools.com/cssref/pr_pos_overflow.asp
— 예브게니 아파 나시 예프
1
때로는 .right 요소에 쓸모없는 가로 스크롤 막대가 생깁니다. 무엇이 문제입니까?
— Patrick Szalapski
1
@PatrickSzalapski 사례를 코드 펜으로 만들 수 있습니까? auto내용에 따라 오버플로 가 발생할 수 있습니다. 다른 오버플로 값을 사용하여 동일한 효과를 얻을 수 있으며 hidden귀하의 경우에 더 잘 작동 할 수 있습니다.
— mystrdat
1
BFC는 무엇을 의미하며 웹에서 BFC를 설명하는 훌륭한 일반 자습서가 있습니까?
— lulalala
1
@lulalala 블록 포맷 컨텍스트를 나타냅니다 . 보다 자세한 설명이 있습니다
— bobo
23

이전 버전의 특정 브라우저 (IE 10 8 이하) 와 호환되지 않아도되는 경우 calc()CSS 기능을 사용할 수 있습니다 .

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

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
— 마르코스 B.
소스
1
IE 9 이상은 calc 속성을 지원합니다. 이 솔루션의 유일한 문제점은 왼쪽 열의 너비를 모르거나 변경 될 수 있다는 것입니다.
— Arashsoft
글쎄,이 솔루션은 유연한 케이스를 지향하고 있으며 부모 컨테이너의 너비를 모르거나 신경 쓰지 않는다고 가정합니다. 질문에 @alexchenco는 메모에 대한 감사 그는 "남은 공간"그래서 ... 나는이 유효 :) 생각을 채우기 위해 싶었 네, IE 9도 지원하고 있다고 말했다)
— 마르코스 B.
15

@Boushley의 대답이 가장 비슷했지만 지적되지 않은 문제가 하나 있습니다. 권리 사업부는 브라우저의 전체 폭을한다; 내용은 예상 너비를 갖습니다. 이 문제를 더 잘 보려면 :

<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/

내용이 올바른 위치에 있지만 (Firefox에서) 너비가 올바르지 않습니다. 자식 요소가 너비를 상속하기 시작할 때 (예 :width: 100% ) 브라우저의 너비와 동일한 너비가 제공되어 페이지 오른쪽에서 오버플로되고 가로 스크롤 막대 (Firefox에서)가 생성되거나 플로팅되지 않고 아래로 밀려납니다 ( 크롬에서).

다음 을 추가하여 쉽게 해결할 수 있습니다overflow: hidden오른쪽 열에 . 이것은 내용과 div 모두에 대한 올바른 너비를 제공합니다. 또한 테이블은 올바른 너비를 받고 사용 가능한 나머지 너비를 채 웁니다.

위의 다른 솔루션 중 일부를 시도했지만 특정 사례에서 완벽하게 작동하지 않았으며 문제를 해결하기 위해 너무 복잡했습니다. 이것은 작동하며 간단합니다.

문제 나 우려가있는 경우 자유롭게 제기하십시오.

— 덴젤
소스
1
overflow: hidden실제로이 문제를 해결해 주셔서 감사합니다. (표시된 답변은 right실제로 부모에서 사용 가능한 모든 공간을 차지 하므로 BTW가 잘못되었습니다. 요소를 검사 할 때 모든 브라우저에서이를 볼 수 있습니다)
— huysentruitw
1
왜 이것이 정확히 작동하는지 설명 할 수 있습니까? 나는 여기 어딘가에 좋은 설명을 보았지만 그것을 찾을 수없는 것 같습니다.
— tomswift
2
@tomswift 설정 overflow: hidden 은 자체 블록 형식화 컨텍스트에 오른쪽 열을 넣습니다. 블록 요소는 사용 가능한 모든 수평 공간을 차지합니다. 참조 : developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
— John Kurlak
overflow:xxx속성 키입니다. 당신이 말했듯이, 그것은 멈 춥니 다#right 아래 확장#left . jQuery UI 크기 조정 가능을 사용하여 발생한 문제를 매우 깔끔하게 해결합니다 #right. 오버플로 속성으로 #left설정하고 크기 조정 가능으로 설정하면 간단한 이동 가능한 경계가 있습니다. jsfiddle.net/kmbro/khr77h0t를 참조하십시오 .
— kbro
13

다음은 허용되는 솔루션에 대한 약간의 수정으로, 오른쪽 열이 왼쪽 열 아래로 떨어지는 것을 방지합니다. 누군가 모르는 까다로운 솔루션으로 대체 width: 100%;되었습니다 overflow: hidden;.

<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/

[edit] 또한 세 개의 열 레이아웃에 대한 예를 확인하십시오. http://jsfiddle.net/MHeqG/3148/

— 다리우스 시코 르 스키
소스
1
고정 로고가있는 유연한 탐색 막대를위한 완벽한 솔루션입니다.
— Trunk
5

두 항목 사이의 flexbox에 남은 공간을 채우려는 경우 분리하려는 2 사이의 빈 div에 다음 클래스를 추가하십시오.

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}
— 헬즈 게이트
소스
4

사용하다 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>
— 일 다르 사리 포프
소스
1
이 답변은 2014 년의 Jordan 답변과 동일합니다.
— TylerH
3

Boushley의 대답은 이것을 플로트를 사용하여 정렬하는 가장 좋은 방법 인 것 같습니다. 그러나 문제가없는 것은 아닙니다. 확장 요소 내에 중첩 된 부동은 사용할 수 없습니다. 페이지가 손상됩니다.

확장 요소와 관련하여 기본적으로 표시된 방법은 실제로 "가짜"입니다. 실제로 부동하지 않고 여백을 사용하여 고정 너비 부동 요소와 함께 재생됩니다.

문제는 정확히 다음과 같습니다. 확장 요소가 플로팅되지 않습니다. 확장 요소 내에 중첩 된 부동을 시도하면 "중첩 된"부동 항목은 실제로 중첩되지 않습니다. 당신이 스틱하려고 할 때clear: both;"중첩 된"플로팅 된 항목 아래에 를 붙이려 고하면 최상위 플로트도 삭제됩니다.

그런 다음 Boushley의 솔루션을 사용하려면 다음과 같은 div를 배치해야한다고 덧붙이고 싶습니다. .fakeFloat {height : 100 %; 폭 : 100 %; 왼쪽으로 뜨다; } 확장 된 div 내에 직접 배치하십시오. 확장 된 div의 모든 내용은이 fakeFloat 요소 내에 있어야합니다.

따라서이 특정한 경우에는 테이블을 사용하는 것이 좋습니다. 플로팅 요소는 실제로 원하는 확장을 수행하도록 설계되지 않았지만 테이블을 사용하는 솔루션은 간단합니다. 일반적으로 부동은 표가 아닌 레이아웃에 더 적합하다는 주장이 있습니다. 그러나 어쨌든 부동을 사용하지 않고, 위조하고 있습니다. 나의 겸손한 의견.

— 친치 11a
소스
레이아웃에 테이블을 사용하지 마십시오. 높이를 설정할 수 없습니다. 그들은 내용을 담기 위해 확장하며 오버플로를 존중하지 않습니다.
— kbro
@kbro : 내용과 표시가 분리되어 있어야하므로 레이아웃에 테이블을 사용하지 마십시오. 그러나 내용이 테이블로 구성된 경우 반드시로 클립 할 수 있습니다 overflow: hidden. jsfiddle.net/dave2/a5jbpc85
— Dave
3

나는 왼쪽의 액체에 대해 위의 해결책을 시도했지만 고정 된 권리는 있지만 그중 하나는 효과가 없었습니다. 작동 한 내용은 다음과 같습니다.

.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>
— 도미니크
소스
3

비슷한 문제가 있었고 여기에서 해결책을 찾았습니다 : https : //.com/a/16909141/3934886

솔루션은 고정 센터 div 및 액체 측면 컬럼입니다.

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

왼쪽 고정 열을 원하면 수식을 적절히 변경하십시오.

— alex351
소스
IE8과 같은 일부 구형 브라우저 및 IE9에서만 일부 제공되지 않음 ( caniuse.com/#feat=calc )
— landi
2

Grid CSS 속성을 사용할 수 있습니다. 가장 명확하고 깨끗하며 직관적 인 방식으로 상자를 구성합니다. 

#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>
스 니펫 확장

— colxi
소스
1

나는 아무도 position: absolute함께 사용하지 궁금position: relative

따라서 다른 해결책은 다음과 같습니다.

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

JSfiddle 예제

— 북시
소스
0

/ * * 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>
— 사용자 1700099
소스
0

이것에 대한 매우 간단한 해결책이 있습니다! // 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;}

링크 : http://jsfiddle.net/MHeqG/

— iamatsundere181
소스
0

비슷한 문제가 있었고 다음과 같이 잘 작동했습니다.

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>

이 방법은 윈도우가 축소 될 때 랩핑되지 않지만 '콘텐츠'영역을 자동으로 확장합니다. 사이트 메뉴의 고정 너비를 유지합니다 (왼쪽).

콘텐츠 상자 및 왼쪽 세로 상자 (사이트 메뉴) 자동 확장 데모 :

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

— 티단
소스
0

오른쪽의 위치 relative, 제거 width및 float속성을 추가 한 다음 값으로 추가 left및 right속성을 시도하십시오 0.

또한 margin left왼쪽 요소의 너비를 기준으로 값을 사용하여 규칙을 추가 할 수 있습니다 (간격이 필요한 경우 + 픽셀) 위치를 유지하기 위해 .

이 예제는 저에게 효과적입니다.

   #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;
    }
— 아리
소스
0 

.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
스 니펫 확장

이 시도. 그것은 나를 위해 일했다.

— 스 푸어 티
소스
0

나는이 문제를 이틀 동안 연구 해 왔으며 응답 고정 너비를 왼쪽으로 만들고 왼쪽을 감싸지 않고 오른쪽을 화면의 나머지 부분을 채우려 고하는 다른 사람에게 도움이되는 솔루션을 가지고 있습니다. 필자의 의도는 모바일 장치뿐만 아니라 브라우저에서도 페이지를 반응 적으로 만드는 것입니다.

여기 코드가 있습니다

// 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()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'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()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'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>
스 니펫 확장

여기 나와 같이 당신을 위해 일할 수있는 내 바이올린이 있습니다. https://jsfiddle.net/Larry_Robertson/62LLjapm/

— 래리 로버트슨
소스
0

품목과 용기에 대한 규칙;

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

공백 사용 : nowrap; 비파괴에 대한 마지막 항목의 텍스트.

품목 X % | 품목 Y % | 아이템 Z %

총 길이는 항상 100 %입니다!

만약

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

그때

항목 X = 70 %

항목 X가 지배적입니다 (첫 번째 항목이 테이블 CSS 레이아웃에서 지배적입니다)!

max-content를 시도하십시오 . 컨테이너에 div를 확산시키기위한 div 내부의 속성 :

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

}

— 드미트로 유 첸코
소스
0

가장 쉬운 해결책은 여백을 사용하는 것입니다. 이것은 또한 반응합니다!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
— 취미 823
소스
0

가장 간단한 해결책은 왼쪽 div 너비를 100 %로 만드는 것입니다. 오른쪽 div의 너비와 그 사이의 여백을 더한 것입니다. 

<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

— 트렁크
소스
-2

일부 jqueryUI 컨트롤 을 레이아웃하려고하는 것과 동일한 문제가 발생했습니다 . 지금 일반적인 철학은 " DIV대신TABLE "이지만, 필자의 경우에는 TABLE을 사용하는 것이 훨씬 더 효과적이라는 것을 알았습니다. 특히 두 요소 (예 : 수직 센터링, 수평 센터링 등) 내에서 직선 정렬이 필요한 경우 TABLE에서 사용 가능한 옵션을 통해 간단하고 직관적 인 제어가 가능합니다.

내 해결책은 다음과 같습니다.

<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>
— 피터슨
소스
9
테이블 형식 데이터 이외의 형식을 지정하기 위해 테이블을 사용해서는 안됩니다. 이제까지.
— mmmeff
1
표의 문제점은 표시하려는 항목이 테이블 형식의 데이터가 아닌 경우 마크 업이 잘못 될 수 있다는 것입니다. 당신이 마크 업 운반하는 의미의 원칙을 무시하도록 선택하는 경우, 당신은뿐만 아니라 다시 얻을 수 <font>, <b>등 HTML 진화가 덜 프리젠 테이션에 초점을 과거.
— Vilinkameni
4
왜 모두가 테이블에 대해 열광하는지 모르겠다. 때로는 유용합니다.
— Jandieg
테이블 높이를 고정 할 수 없습니다. 내용이 커지면 테이블도 커집니다. 그리고 그것은 영광스럽지 않습니다 overflow.
— kbro
@ Jandieg : 설명에 대한 Mihai Frentiu의 답변을 참조하십시오. CSS의 전체 목적은 내용과 모양을 분리하는 것입니다. display:table테이블 형식이 아닌 데이터를 원하는 모양으로 만들기 위해 속성을 사용 하는 것이 좋습니다. 레이아웃을 제어하기 위해 페이지 열 또는 양식 컨트롤과 같은 테이블 형식이 아닌 데이터를 HTML 테이블로 작성하는 것은 불결합니다.
— Dave
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.