고정 요소와 여러 스크롤바가있는 특정 CSS 레이아웃

마지막 날에는 웹 사이트에 필요한 특정 레이아웃에 몇 가지 문제가있었습니다. 레이아웃과 CSS 코드를 설명하기 위해 이미지를 추가했습니다. 아래 CSS 코드를 사용해 보았습니다. 플로팅 레이아웃, 절대 위치 지정 및 모든 종류의 조합을 사용하여 레이아웃을 수정하려고 시도했지만 올바르게 만들 수없는 것 같습니다. 나는 너희 중 누구도 이걸로 나를 도울 수 있기를 바란다.고정 요소와 여러 스크롤바가있는 특정 CSS 레이아웃

html, body { 
    overflow:hidden; 
} 

* { 
    margin:0; 
    padding:0; 
} 

.header { 
    background-color:#CCC; 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:40px; 
} 

.wrapper { 
    position:absolute; 
    width:100%; 
    top:40px; 
    bottom:40px; 
} 

.left { 
    float:left; 
    overflow-y:scroll; 
    width:30%; 
    min-width:300px; 
    height:100%; 
} 

.right { 
    float:left; 
    overflow-y:scroll; 
    right:0; 
    width:70%; 
    height:100%; 
} 


.footer { 
    background-color:#000; 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    min-width:500px; 
    height:40px; 
}

출처

2012-11-27 Daan Vermeulen

이 당신이 원하는 무엇인가 :

여기

Image with description how the layout should be

가 CSS 코드 : 여기

레이아웃 이미지입니까? DEMO

REMOVE

.wrapper 
{ 
    position:absolute; 
    width:100%; 
    top:40px; 
    bottom:40px; 
} 

.left 
{ 
    float:left; 
    overflow-y:scroll; 
    width:30%; 
    min-width:300px; 
    height:100%; 
} 

.right 
{ 
    float:left; 
    overflow-y:scroll; 
    right:0; 
    width:70%; 
    height:100%; 
}

div.left, 
div.right { 
    display:inline; 
    float: left; 
    position: relative; 
    height: 100%; 
    overflow-y: scroll; 
} 

.left { 
    width: 30%; 
} 

.right { 
    width: 70%; 
}

UPDATE로 교체DEMO

* 
{ 
    margin:0; 
    padding:0; 
} 

div.wrapper { 
    width: 100%; 
    min-width: 600px; /* If the window gets bellow 600px .left will stay 30% of 600 and .right will stay 70% of 600*/ 
} 

div.left, 
div.right { 
    display:inline; 
    float: left; 
    position: relative; 
    height: 100%; 
    overflow-y:scroll; 
} 

.left { 
    width: 30%; 
    background: red; 
} 

.right { 
    width: 70%; 
    background:green; 
} 

.header 
{ 
    background-color:#CCC; 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:40px; 
} 

.wrapper 
{ 
    position:absolute; 
    width:100%; 
    top:40px; 
    bottom:40px; 
} 



.footer 
{ 
    background-color:#000; 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    min-width:500px; 
    height:40px; 
}

출처

2012-11-27 19:26:37

안녕하세요, Eric 님, 답장을 보내 주셔서 감사합니다. 제공 한 코드에서 '.left'클래스에 '최소 너비 : 300px'를 추가하면 '.right'클래스가 사라지고 창의 크기가 조정됩니다. –

레이아웃을 유동적으로 사용하려면 'px'에서 너비를 설정할 수 없습니다. 백분율이어야합니다. 왼쪽 열에 '300px'의 최소 너비가 필요하거나 '최소 너비 : x %'로 정할 수 있습니까? 'x'는 30 %보다 작은 비율입니다. –

크기가 300px보다 작 으면 표시되는 목록보기의 레이아웃을 유지하기 위해 왼쪽 레이아웃에 가로 스크롤 막대가 있어야합니다. 그러나 그것이 가능하지 않은 경우 나보다 도와 주셔서 감사하고 싶습니다 :) –

우리는 결국 예를 들어 300 픽셀에 사용 할 수 있어야하고, 수 있도록 플렉스 박스 레이아웃을 사용 나머지는 유동적이다.

출처

2013-10-09 08:38:44

고정 요소와 여러 스크롤바가있는 특정 CSS 레이아웃

답변

관련 문제