오버플로 만드는 법 : 숨김으로 내용을 숨길 수 있습니까?

Question

this example을 참조하십시오. 순수 HTML/CSS로 가로 레이아웃을 만들려고합니다. 오래된 브라우저는 신경 쓸 필요가 없습니다. 나는 display: table 기술로 만들었습니다. 그러나 주 텍스트 컨테이너 (밝은 노란색)를 표시하는 것은 문제가되었습니다. 이 각각은 수직 스크롤을 방지하기 위해 overflow: hidden입니다. 나중에 그림자 효과를 추가 할 생각입니다. 이제는 예를 들어 상단과 하단에 10 %의 여백을두고 높이를 80 %로 만들고 싶습니다. 하지만 내가 얻는 것은 모든 부모 컨테이너 (연녹색)를 늘리는 큰 텍스트의 컨테이너이므로 80 %가 너무 많이되었습니다.

자바 스크립트가 없으면 피할 수있는 방법이 있습니까?

어쩌면 텍스트 컨테이너의 높이를 얻을 수 있지만 하단에는 약간의 여백이 있습니다. 나는 어떤 해결책을 주셔서 감사하겠습니다.

Answer 1

테이블 레이아웃을 사용하지 않으면 테이블 셀 div의 너비/높이를 설정하는 데 문제가 있으므로 오버플로 규칙을 따르지 못합니다. 당신의 layout.css에서 다음과 같은 CSS 속성은,이 얻을 것이다
업데이트는 시작 :

#content{ 
    display:block; 
    height:90%; 
    overflow:hidden; 
    vertical-align:top; 
} 

#content-inner{ 
    display:block; 
    height:100%; 
    vertical-align:top; 
} 

.article{ 
    display:inline-block; 
} 

Answer 2

여전히 당신이 원하는 것을 명확하지 않다; 어쩌면 빠른 스케치를 게시할까요?

어쨌든 가로 스크롤 막대는 피하고 싶습니다. 그렇게하려면 #content { width: 61%;} (나머지 CSS 기준)을 설정하십시오. 현재 layout.css에서 #content width은 305 %로 설정됩니다.

RE :

@Brock 아담, 나는 div.article 콘텐츠를 화면의 80 %, 부모 컨테이너 아닌 80 %를 만들고 싶어 의미한다. 나는 이것이 부모 div # 콘텐츠를 화면의 100 %가되도록 강요함으로써 달성 될 수 있다고 믿습니다. 하지만 어떻게해야할지 모르겠다.

div.article-content 현재 페이지에 5 번 나타납니다. 화면의 80 %로 설정하면 사용자가 볼 수있는 것보다 최소 400 % 더 넓은 페이지가 제공됩니다.

질문 :

1. 첫 번째 DIV는 "헤더"로 지목되지만 왼쪽 떠있어 만 39 % 넓은. 이것은 헤더 (페이지 상단의 바) 또는 왼쪽 사이드 바입니까?
2. 기사가 동일한 행에 5 개의 작은 열로 구성되어 있거나 한 페이지 씩 차례로 페이지가 아래로 내려와 있다고 가정합니까?

다시 말하면, 예제 페이지의 문장과 의미는 분명하지 않습니다. 의 빠른 스케치를 게시하면 레이아웃이 도움이 될 것입니다.