'float : right'또는 'float : left'를 사용할 때 css Height를 100 %로 설정하지 않습니다.

웹 프로젝트를 진행하면서 HTML 페이지를 디자인해야합니다. 더 좋은 페이지를 만들기 위해 요소의 높이를 백분율로 설정하고 싶습니다.'float : right'또는 'float : left'를 사용할 때 css Height를 100 %로 설정하지 않습니다.

나는 CSS에서 플로트를 사용하여 설정하는 경우 :

body, html{ 
    height: 100%; 
    width: 100% 
}

그것은 높이가 작동하지 않습니다. float를 사용하는 대신 position을 변경하여 일시적으로 수정했습니다. 나는 그것이 효과가없는 이유를 원합니다. 그리고 누구든지 나를 도울 수 있습니까?

이 결함 코드 :

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#test1, #test2{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:30%; 
 
} 
 
#test1{ 
 
    float:left; 
 
    background: #111111; 
 
} 
 
#test2{ 
 
    float:right; 
 
    background: #009A61; 
 
} 
 

 
#test3{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:40%; 
 
    background: cornsilk; 
 
}

<!doctype html> 
 
    <html> 
 
    <head> 
 
    <link rel="stylesheet" href="test.css" /> 
 
    </head> 
 
    <body> 
 
    <div id="test1"></div> 
 
    <div id="test3"></div> 
 
    <div id="test2"></div> 
 
    </body> 
 
</html>

위의 코드를 제외, 결과는 다음과 : 그것은 바닥에 흰색 부분을 표시해서는 안 detail image

출처

2017-12-24 Beibei Kang

사용 높이 : 100vh; 이보기의 높이 걸립니다 – omukiguy

세 개의 div는 각각 1 개의 뷰포트 높이지만 #test3 div는 인라인 블록이므로 앉아있는 라인 상자를 만듭니다. 모든 라인 박스에는 기준선이 #test3 div의 하단과 수직으로 정렬 된 스트럿이 포함되어 있으며 스트럿의 디 센더 부분이이 아래에 매달려 있습니다. 세로 스크롤 막대는 문서를 스트럿 하단에 표시하기 위해 만들어지며 높이를 흰색으로 표시합니다.

#test3 div vertical-align:top을 작성하여 #test3 div에서 스트럿의 수직 정렬을 수정하면됩니다.

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#test1, #test2{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:30%; 
 
} 
 
#test1{ 
 
    float:left; 
 
    background: #111111; 
 
} 
 
#test2{ 
 
    float:right; 
 
    background: #009A61; 
 
} 
 

 
#test3{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:40%; 
 
    background: cornsilk; 
 
    vertical-align:top; 
 
}

<div id="test1"></div> 
 
    <div id="test3"></div> 
 
    <div id="test2"></div>

출처

2017-12-24 18:50:21 Alohci

좋아, 정말 멋진 답변입니다. 나는 그것을 이해했다. 고맙습니다. –

빈 블록 수준 요소를 추가하고 clear : both; 떠 다니는 요소를 담고있는 부모 요소가 끝나기 전에, 지금은 당신을 위해 일을 할 플로팅 요소를 지우는 싼 해결책이지만, 이것을 사용하지 않을 것을 권장합니다.

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#test1, #test2{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:30%; 
 
} 
 
#test1{ 
 
    float:left; 
 
    background: #111111; 
 
} 
 
#test2{ 
 
    float:right; 
 
    background: #009A61; 
 
} 
 

 
#test3{ 
 
    display:inline-block; 
 
    height: 100%; 
 
    width:40%; 
 
    background: cornsilk; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<!doctype html> 
 
    <html> 
 
    <head> 
 
    <link rel="stylesheet" href="test.css" /> 
 
    </head> 
 
    <body> 
 
    <div id="test1"></div> 
 
    <div id="test3"></div> 
 
    <div id="test2"></div> 
 
    <div class="clear"></div> 
 
    </body> 
 
</html>

here에서

이 일을 했습니까? 문제를 보지 못했거나 제대로 이해하지 못했을 수도 있습니다.

출처

2017-12-24 18:20:47 lllllllllllllIllllIll

어쩌면 위의 대답을 읽을 수 있습니다. –

'float : right'또는 'float : left'를 사용할 때 css Height를 100 %로 설정하지 않습니다.

답변

관련 문제