Пустое место внизу страницы (беспорядочный код?)

мой код все перепутался, я верю. У меня есть тонна белого пространства внизу моей страницы, и я не знаю, почему. Я в основном просто работал с тем, что работает до сих пор, но я также хочу, чтобы моя страница была отзывчивой, и она масштабирует действительно странный atm. Наверное, это очень сложный вопрос, но если кто-то может быть очень благодарен. Любые предложения о том, что делать, чрезвычайно ценятся.Пустое место внизу страницы (беспорядочный код?)

Heres код:

http://jsbin.com/rugidepebe/1/edit?html,css,output

HTML

<!Doctype html> 
<html> 
    <head> 

     <title>Application</title> 

     <link rel="stylesheet" type="text/css" href="standard.css"> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'> 

    </head> 

    <body> 


     <div id="margin-right"> 
     </div> 

     <div id="margin-left"> 
     </div> 


     <div id="navbar"> 
     </div> 

     <div id="contenthead"> 
     <h1 id="AppHead">Application</h1> 
     </div> 

     <div id="appbike"> 
     <h2>Walk/Bike</h2> 
     <img src="images/bike.png" id="bike"/> 
     </div> 

     <div id="appmotor"> 
      <h2>Motor</h2> 
      <img src="images/car.png" id="car"/> 
     </div> 

    </body> 

</html>

CSS

body { 

margin: 0px; 

} 

#navbar { 

position: fixed; 
width: 100%; 
height: 50px; 
background-color: #0C4564; 
z-index: 3; 

} 

#margin-right { 

position: absolute; 
height: 150%; 
width: 7.8125%; 
background-color: #6FE3C2; 
right: 0; 
z-index: 1; 

} 

#margin-left { 

position: absolute; 
height: 150%; 
width: 7.8125%; 
background-color: #6FE3C2; 
z-index: 2; 

} 

#AppHead { 

text-align: center; 
text-decoration: underline; 
font-family: 'Open Sans', sans-serif; 
font-size: 3.5em; 
font-weight: 600; 
color: #575757; 

} 

#contenthead { 
display: inline-block; 
width: 100%; 
margin-top: 50px; 
margin-bottom: 10px; 
} 


#appbike { 

position: relative; 
width: 15%; 
height: 500px; 
background-color: #53A78F; 
text-align: center; 
margin-left: 25%; 
margin-top: 5%; 

} 

#bike { 

width: 70%; 
position: relative; 
margin-top: 50%; 

} 

#appmotor { 

position: relative; 
bottom: 10; 
float: right; 
width: 15%; 
height: 500px; 
background-color: #53A78F; 
bottom: 498px; 
margin-right: 25%; 

} 

h2 { 
text-align: center; 
text-decoration: underline; 
font-family: 'Open Sans', sans-serif; 
font-weight: 300; 
font-size: 2 em; 

} 

#car { 

width: 70%; 
position: relative; 
margin-top: 50%; 
text-align: center; 
margin-left: 15%; 

}

источник

2015-02-19 avghdev

Вы все еще должны относиться тело HMTL & как оберток иногда, вы устанавливаете высота до 150%, из которых она является родительской высотой автоматически, поэтому он немного запутан. Просто измените свое первое правило к следующему:

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

Добавление в высоту 100% должен устранить проблему, также добавлены в футляре: 0; и html doc для селектора css.

источник

2015-02-19 06:17:45

Спасибо! Это было намного быстрее, чем я думал, ты потрясающий! – avghdev

Пустое место внизу страницы (беспорядочный код?)

ответ

Смежные вопросы