페이지 하단의 열린 공간을 어떻게 없앨 수 있습니까?

저는 작은 프로젝트를 진행해 왔고 문제가 생겼습니다. 브라우저에서 내 웹 사이트를 볼 때 모든 컨텐츠 하단에 매우 큰 열린 공간이 있습니다. 아무도 내가 문제의 위치를 찾을 수 있도록 도와 줄 수 있습니까? 나는 그것을 몇 시간 동안 찾으려고 노력해왔다.페이지 하단의 열린 공간을 어떻게 없앨 수 있습니까?

여기에 코드입니다 : 코드 약자로

이

<html> 
<head> 
<title>Media Mash - Home</title> 
<style type="text/css"> 
* { 
font-family:neuropol; 
color:rgb(255,255,255); 
} 
body { 
background-color:rgb(52,126,153); 
} 
.text1 { 
font-size:20; 
color:rgb(0,0,0); 
} 
.text2 { 
font-size:35; 
text-decoration:none; 
margin-left:4%; 
margin-right:4%; 
} 
.parent { 
min-width:1255px; 
} 
.topBar { 
background-color:rgb(161,35,35); 
display:inline-block; 
width:1247px; 
text-align:center; 
height:40px; 
} 
.leftBar { 
top:8px; 
background-color:rgb(161,35,35); 
position:relative; 
display:inline-block; 
width:250px; 
text-align:center; 
height:581px 
} 
.main { 
background-color:rgb(161,35,35); 
position:relative; 
display:inline-block; 
left:258px; 
bottom:573px; 
width:989px; 
height:581px; 
} 
.imageLeft { 
background-color:rgb(104,22,22); 
position:relative; 
display:inline-block; 
} 
.imageRight { 
background-color:rgb(104,22,22); 
position:relative; 
display:inline-block; 
} 
.textLeft { 
background-color:rgb(104,22,22); 
position:relative; 
display:inline-block; 
} 
.textRight { 
background-color:rgb(104,22,22); 
position:relative; 
display:inline-block; 
} 
.copyright { 
background-color:rgb(161,35,35); 
position:relative; 
display:inline-block; 
height:32px; 
bottom:565px; 
width:1247px; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
    <div class="topBar"> 
     <a class="text2" href="placeholder.html">Media Mash</a> 
     <a class="text2" href="placeholder.html">Film</a> 
     <a class="text2" href="placeholder.html">Music</a> 
     <a class="text2" href="placeholder.html">Games</a> 
     <a class="text2" href="placeholder.html">Books</a> 
    </div> 
    <br/> 
    <div class="leftBar"> 
     <a class="text1"> 
      Media Mash is a website dedicated to helping you realise what favourite films, songs, games and books are. 
      <br/> 
      <br/> 
      We do so in a fun image versus image format, which allows you to pick out your favourites. 
      <br/> 
      <br/> 
      Have a go and create your top 10 lists today! 
     </a> 
    </div> 
    <br/> 
    <div class="main"> 
     <div class="imageLeft"> 
      <img src="images\The Avengers MM.jpg"/> 
     </div> 
     <div class="imageRight"> 
      <img src="images\Star Wars V The Empire Strikes Back MM.jpg"/> 
     </div> 
     <br/> 
     <div class="textLeft"> 
      <a class="text1">The Avengers</a> 
     </div> 
     <div class="textRight"> 
      <a class="text1">Star Wars V: The Empire Strikes Back</a> 
     </div> 
    </div> 
    <br/> 
    <div class="copyright"> 
     <a class="text1">Copyrighted intellectual property of Thomas Crowther ©</a> 
    </div> 
</div> 
</body> 
</html>

출처

2012-05-20 Thomas Crowther

아무런 문제가 없습니다. 고정 높이를 기대하지 않으려면 CSS의 높이를 수동으로 정의해야합니까? –

나는 "고정 된"높이를 사용하지 않을 것을 제안하고있다. 차라리 display 및 float을 사용합니다. 페이지를 1000px 이상으로 만들지 말고, 대신 1000px의 래퍼를 사용하고 margin : 0 auto; Blowski가 firebug 또는 firefox 용 웹 개발자 플러그인을 설치했다면 Opera/Safari/GoogleChrome에 도구가 통합되어 있습니다 ... – HamZa

, 브라우저가 처음으로 서로 아래에있는 상자 페이지를 렌더링하고 다른 하나의 오른쪽에 표시 상자를 이동합니다. 이것이 상대적인 위치 결정의 의미입니다.

당신이 원하는 무엇 할 대신 상대 위치를 사용하는 (.rightBar`에) (.leftBar에) float:left 및 float:right를 사용합니다. 브라우저는 요소를 처음부터 렌더링합니다.

CSS의 '상자 모델'에 대해 읽고 Firebug for Firefox를 확인하시기 바랍니다.

출처

2012-05-20 21:26:09

Thanks. 훌륭합니다. –

페이지 하단의 열린 공간을 어떻게 없앨 수 있습니까?

답변

관련 문제