높이와 너비가 100 % 인 div 내부의 div 높이를 %로 설정
스닉
현재 HTML 구조가 있습니다.
<release_cover>
<overlay_controllers> Green Div </overlay_controllers>
<img src="blu.div" />
</release_cover>
그리고 이것을 달성하고 싶습니다 
.
img 태그는 파란색 컨테이너입니다. 자홍색은 release_cover 태그입니다.
overlay_controller 태그 (녹색)를 컨테이너의 80 %에 정확히 위치하는 20 % 높이로 설정하는 데 문제가 있습니다.
지금까지 :
release_cover{
width: 100%;
height: 100%;
position: relative;
}
release_cover img{
width: 100%;
height: 100%;
}
overlay_controllers{
min-height: 20%;
margin-top: 80%;
position: absolute;
width: 100%;
}
불행히도 녹색 div의 높이는 고정 된 20 %가 아니라 내부에 무엇이 있는지에 따라 다릅니다.
제안?
(지금까지받은 제안이있는 예 : https://jsfiddle.net/82Lb0nhe/ )
Chrillewoodz
absolute와 함께 위치 조합을 사용하는 top동시에 height보다 큰 값을 허용하지 않으면 300px올바르게 계산됩니다.
.container {
width: 300px;
height: 300px;
}
overlay_controllers {
z-index: 2;
bottom: 0%;
position: absolute;
margin-top:;
height: 20%;
width: 100%;
background-color: #fc0;
}
release_cover {
top: 0px;
width: 100%;
position: relative;
display: block;
overflow: hidden;
margin: 0px;
padding: 0px;
max-height: 300px;
}
release_cover img {
padding: 0;
margin: 0px;
z-index: 1;
width: 100%;
height: 100%;
}
작업 바이올린 : https://jsfiddle.net/fL98w9of/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
입력 상자 너비와 높이를 외부 div의 너비와 높이에 대해 100 %로 만들기
- 2
컨테이너 내부에서 높이가 100 % 인 3 개 div를 가로로 정렬하는 방법
- 3
너비와 높이를 div로 퍼센트로 설정
- 4
div 높이를 컨테이너 div의 최대 높이로 설정
- 5
div의 높이를 외부 div의 100 % 높이로 설정하는 방법은 무엇입니까?
- 6
Div 너비 / 높이 다른 div 내부의 여유 공간 100 %
- 7
100 % 높이 인 DIV 내에서 100 % 높이를 가질 수 있습니까?
- 8
최소 높이가 100 % 인 컨테이너의 자식으로 최소 높이를 100 %로 설정합니다.
- 9
너비와 높이가 절대적인 <div>를 가로 중앙에 배치
- 10
css 100vh가 div를 100 % 높이로 설정하지 않습니다.
- 11
div의 높이를 0으로 설정
- 12
상대 div의 높이는 실제로 높이를 설정할 때까지 100 %입니다 : 100 %
- 13
DIV의 높이를 100 %로 강제
- 14
DIV의 높이를 100 %로 강제
- 15
img 크기를 찾고 div css 높이와 너비로 설정하는 jquery
- 16
img 크기를 찾고 div css 높이와 너비로 설정하는 jquery
- 17
div 내부 너비가 100 % 인 입력이 div와 겹칩니다.
- 18
가로로 자식 div 수를 포함하는 특정 높이 및 너비의 부모 div
- 19
텍스트 줄 바꿈 div 내부의 절대 위치 텍스트에 줄 바꿈의 100 %에서 고정 된 너비와 높이가 있습니다.
- 20
div 컨테이너의 높이를 설정하면 div 내부 클릭이 비활성화됩니까?
- 21
조부모의 DIV를 100 % 높이로 만들고 조부모의 너비를 늘립니다.
- 22
컨테이너 내부의 두 div를 동일한 높이 (100 %)로 만듭니다.
- 23
부모 div를 래핑 자식의 너비와 높이로 유지
- 24
내 div의 높이를 창 높이의 80 %로 설정하려고합니다.
- 25
부모의 100 % 높이로 고정 너비 설정
- 26
다른 div의 높이를 기준으로 div의 높이 설정
- 27
내부 div의 높이가 100 % 크기로 늘어나지 않음
- 28
높이 100 %를 사용하여 부동 div가 높이와 일치하도록 유지하지만 그 중 하나의 단락이 오버플로됩니다.
- 29
JQM을 사용하여 자식 div가 부모의 너비와 높이를 재정의하지 않는 이유
몇 마디 만하겠습니다