내 웹 사이트에서

크기를 조정할 때 화면에 전체 내용을 맞추는 방법, 6 '이미지 상자'(3 행 '3'아래 '행')가 필요합니다. 화면/탭의 크기를 변경하면이 6 개의 이미지 상자가 항상 완전히 보입니다. 항상 화면 크기에 맞추어야합니다. 내 코드는 어떻게 든 작동하지만 바닥에는 작동하지 않습니다. 특정 금액 후에 화면 크기가 감소한 후 두 번째 행에있는 카드의 일부만 볼 수 있습니다.내 웹 사이트에서

또한 스크롤 막대가 나타나지 않으면 내 콘텐츠가 화면의 100 %를 차지하고 싶습니다.

웹 콘텐츠는 상단 레이아웃과 이미지 상자의 두 부분으로 나뉩니다.

이 기본적으로 내 CSS 파일입니다 :

* { 
font: 18px Verdana; 
font-size: 22px; 
} 

html{ 
height: 100%; 
} 

body { 
font: 18px Verdana; 
height: 100%; 
margin-left: 30px; 
margin-right: 30px; 
margin-bottom: 30px; 
margin-top: 30px; 
overflow: hidden; 
} 

#topLayout { 
height: 190px; 
margin-bottom: 10px; 
} 


#imagebox { 
height: 80%; 
margin-bottom: 0px; 
display: flex; 
justify-content: space-between; 
flex-wrap: wrap; 
} 

.box{ 
cursor: pointer; 
flex: 0 1 32.5%; 
margin-top: 1.2%; 
}

이 내 HTML 코드입니다 :

<body> 

<div id="topLayout"> 

    <div id="block1"> 
    ..... 
    </div> 

    <div id="block2"> 
    .... 
    </div> 

</div> 

// the images are appended to the imagebox tag in the .js file via a 
    function 

<div id="imagebox"></div> 

</div>

미리 주셔서 대단히 감사합니다.

출처

2017-11-09 lotte

입니다보십시오. 로드 된 페이지를 마우스 오른쪽 버튼으로 클릭하고 "Inspect"를 선택하여 마크 업/스타일을 얻을 수 있습니다. – LGSon

내가 보았던 한 가지 문제는 몸체의 높이가 100 %와 여백을 더한 것이므로 문서 높이가 창 높이보다 항상 60px 크게 만듭니다. 해결책 : 높이에'calc'를 사용하고 여백 대신에 여백을 사용하고'box-sizing : border-box'를 사용하십시오. –

아마도 도움이됩니다. 다음은이

#imagebox { 
position: absolute; 
width: 100%; 
top: 230px; 
bottom: 0; 
left: 30px; 
right: 30px; 
}

우리는이 문제를 재현 코드 snippet_를 작업 _minimal을 필요 example

출처

2017-11-11 04:56:18

답변

관련 문제