CSS : 고정 너비 + 동적 너비 어린이, 100 % 부모 너비 채우기?

Question

나는 부모님 div (- 다이어그램에서) 누가 내가 미리 모르는 너비입니다.

I가 두 개의 자식 div가있다 (a 및 b) :

B는 - 항상 일정한 폭 알려진 이고, 항상 오른쪽에 위치한다.

는 A는 -

----------------------------------- 
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb - 
- a      a b b - 
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb - 
----------------------------------- 

모두 A와 B가 동일 높이가 고정되어 나머지 공간을 채울 것이다.

나는이 간단한 해결책이 있다고 상상하지만, 아직 찾지 못했습니다. 나는 둘 다 부동 시도했지만, 하나 또는 다른 아래에 푸시 가져옵니다.

아이디어가 있으십니까? 당신이 오른쪽에있는 크기의 컨테이너를 고정하려는 특히이 때문에

Answer 1

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

: (이 모바일 장치에 대한 더 많은 이해가 않습니다 ..) http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

SRY, 사실이 하나 같아요 : http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm

Answer 2

는이 http://jsfiddle.net/sandeep/NCkL4/8/

,691 같은 display:table 속성을 사용할 수 있습니다 될 수있다

HTML :

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

CSS :

#parent{ 
    overflow:hidden; 
    background:yellow; 
    position:relative; 
    display:table; 
} 
.left{ 
    display:table-cell; 
} 
.right{ 
    background:red; 
    width:50px; 
    height:100%; 
    display:table-cell; 
} 

이 있지만 IE7을 지원 아니에요.

또는 당신은이 수행 할 수 있습니다

HTML :

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

CSS :

.right {float:right; width:200px; } 
.left { background: green;} 

확인이 http://jsfiddle.net/47YMn/1/

새 바이올린 http://jsfiddle.net/sandeep/47YMn/7/

Answer 3

위의 다른 훌륭한 대답은 위치 지정을 사용하는 반면,이 것은 수레를 사용합니다. 당신이 선택한 것은 당신에게 달린 것입니다. 각각에는 그것의 공로 및 결점이있다.

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, button, 
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; } 
body { font: normal 100%/1.5em "Helvetica Neue", Helvectica, Arial, sans-serif; color: #353E34; background: #FFF; text-align: left; } 
html>body { font-size: 16px; } 
.content-wrapper { width: 100%; float: left; } 
.content { margin-right: 220px; background: #9CC; } 
.sidebar { float: right; width: 200px; margin-left: -200px; background: #FDE95E; } 
.inner { margin: 10px; } 
.footer { clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; } 

HTML

<div class="content-wrapper"> 
    <div class="content"> 
    <div class="inner"> 
     <p>Content</p> 
    </div> 
    </div> 
</div> 
    <div class="sidebar"> 
    <div class="inner"> 
     <p>Sidebar</p> 
    </div> 
    </div> 
    <div class="footer"> 
    <p>Footer</p> 
    </div> 

Answer 4

이 깨끗하고 아주 허용 방법입니다.여기에서 수레가 어떻게 작동하는지 잘 활용하면 여기에서 명확한 수정을 사용했지만 수렁을 비우기 위해 clear:right이라는 여분의 div를 컨테이너 닫기 태그 바로 앞에 사용할 수도 있습니다. 당신은 holy grail를 찾고 있습니다

http://jsfiddle.net/sg3s/sSJvT/

Answer 5

:이 기사는 전체 예제를 가지고 걸을하지만 여기에 요약 한 것입니다.

래핑 div는 원하는 너비와 동일한 너비로 오른쪽 패딩이 있어야합니다. 내부 div는 왼쪽으로 떠서 정적 여백 열은 음수 여백을 사용하여 패딩 된 영역으로 이동합니다. 여기

튜토리얼

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

과 CSS에서 마크 업입니다

#container { 
    padding-left: 200px; /* LC width */ 
    padding-right: 150px; /* RC width */ 
} 
#container .column { 
    position: relative; 
    float: left; 
} 
#center { 
    width: 100%; 
} 
#left { 
    width: 200px;   /* LC width */ 
    right: 200px;   /* LC width */ 
    margin-left: -100%; 
} 
#right { 
    width: 150px;   /* RC width */ 
    margin-right: -150px; /* RC width */ 
} 

튜토리얼은 2 열 예입니다하지만 당신은 왼쪽 열을 제거하고에서 왼쪽 패딩을 제거 얻을 경우 너는 잘 가야하는 용기.

Answer 6

약 display: flex?

#parent{ 
    background:yellow; 
    display:inline-flex; 
} 
.left{ 
    display:flex; 
    flex: 1 1 auto; 
} 
.right{ 
    display:flex; 
    background-color:red; 
} 

http://jsfiddle.net/NCkL4/1037/