CSS 레이아웃이 올바르게 표시되지 않음
광택 오이
레이아웃하려는 응용 프로그램이 있습니다. 왼쪽 열 내용을 제외하고는 모든 것이 좋습니다. 오른쪽 열과 동일한 높이 인 상위 컨테이너 높이 의 100 %를 표시해야합니다 .
#Container외부 컨테이너입니다. #TreeList왼쪽 열입니다. #Tabcontrol오른쪽 열입니다.
지금 내 앱은 다음과 같습니다.
내 앱의 현재 CSS는 다음과 같습니다.
html {
font-family: Open Sans, Calibri, Arial;
margin: 0 auto;
width: 1500px;
}
body {
}
#Container {
float:left;
width:100%;
position:relative;
border:1px solid black;
}
#TreeList {
position:relative;
border-bottom: 1px solid #707070;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
float:left;
overflow:hidden;
padding: 20px;
}
#TabControl {
position:relative;
border:1px solid #707070;
overflow:hidden;
float:left;
padding: 20px;
}
다운로드
heightCSS 문서에 아무것도 설정하지 않았 으므로 모든 높이가 거의 무작위입니다. 먼저 body& 의 기본 높이를 설정 한 html다음 다음 container과 같이 설정합니다.
html, body {
height: 100%;
}
#Container {
float:left;
width:100%;
position: relative;
border:1px solid black;
height: 100%;
}
그런 다음 다른 요소에 대해 :
#TreeList {
position:relative;
border-bottom: 1px solid #707070;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
float:left;
overflow:hidden;
padding: 20px;
height:100%;
}
#TabControl {
position:relative;
border:1px solid #707070;
overflow:hidden;
float:left;
padding: 20px;
height: 100%;
}
또는 원하는 경우 position: absolute;하위 요소에 사용하고 다음과 같이 할 수 있습니다 .
child {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 100px;
}
어느 요소가 전체 화면으로 스트레칭하고 폭 유지할 것이다 당신이 선택합니다.
내가보기 엔에 대한 높이를 설정하기 위해 자바 스크립트를 사용하는 것이 좋습니다 있지만 이것은 작동해야 body뿐만 아니라 position: absolute;대신을 relative;
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
CSS 오버레이 div가 올바르게 표시되지 않음
- 2
react-bootstrap 그리드 레이아웃이 올바르게 표시되지 않음
- 3
SVG 아이콘이 올바르게 표시되지 않음
- 4
HTML에서 카드 레이아웃이 올바르게 설정되지 않음
- 5
CSS3 모양이 올바르게 배치되지 않음
- 6
CSS 열이 올바르게 스택되지 않음
- 7
CSS / HTML 메뉴가 올바르게 표시되지 않음
- 8
크롬에서 CSS가 올바르게 표시되지 않음
- 9
CSS-단락이 div에 올바르게 표시되지 않습니다.
- 10
CSS 문제로 인해 IE 및 Firefox에서 페이지가 올바르게 표시되지 않음
- 11
CSS가 레이블에 올바르게 캐스케이드되지 않음 (JavaFX)
- 12
Excel에서 시간이 올바르게 표시되지 않음
- 13
배경 이미지가 올바르게 표시되지 않음
- 14
Javafx / CSS 흰색이 검정색 배경에 올바르게 표시되지 않음
- 15
이온 탭 색상이 올바르게 표시되지 않음
- 16
오버레이 크기가 올바르게 조정되지 않음 CSS
- 17
레이아웃 디자인이 VS 2019에서 올바르게 표시되지 않습니다.
- 18
어댑터를 만들 때 레이아웃이 올바르게 표시되지 않습니다.
- 19
geom_boxplot이 올바르게 표시되지 않음
- 20
Django Wagtail TableBlock이 올바르게 표시되지 않음
- 21
Packagist에서 Github 별이 올바르게 표시되지 않음
- 22
DateTime 형식이 올바르게 표시되지 않음
- 23
Python 형식이 올바르게 표시되지 않음
- 24
패널 제목이 올바르게 표시되지 않음
- 25
JavaScript 출력이 올바르게 표시되지 않음
- 26
목록 항목이 올바르게 표시되지 않음
- 27
laravel에서 URL이 올바르게 표시되지 않음
- 28
pydev의 주석이 올바르게 표시되지 않음
- 29
Android 배경색이 올바르게 표시되지 않음
몇 마디 만하겠습니다