/ / Moje divy są niesprawne i wyrównane u dołu strony? - html, css

Moje divy są niesprawne i wyrównane u dołu strony? - html, css

Oto kod w treści mojego HTML:

<div id="mtx_bckgd">
<p id="mtx_txt"></p>
</div>
<div class="outerdiv" id="headerbox">
<div id="uwlogo">
<img src="/images/uwlogo.png" height="50px">
</div>
<div id="JaminWEB">
<h1>JaminWEB</h1>
</div>
</div>
<div class="outerdiv" id="navbar">
<a href="runningCalculator.html"><input type="button" class="navbutton" value="Running Calculator"/></a>
<input type="button" class="navbutton"/>
<input type="button" class="navbutton"/>
</div>
<div class="outerdiv" id="footer">
<p>Last modified: March 21st, 2014</p>
</div>

Oto odpowiedni CSS:

#mtx_bckgd
{
font-family: "Courier New";
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;

z-index: -1;
background: linear-gradient(180deg, #39275b, #FFF);
}

#headerbox
{
width: 80%;
height: 50px;
}

#navbar
{
width: 80%;
height: 30px;
}

#footer
{
position: absolute;
bottom: 0px;
height: 100px;
width: 80%;
}

Headbox i navbar powinny być wyrównane na górze w odpowiednich zamówieniach. Stopka powinna być wyrównana u dołu. Co się dzieje, że robię stopę POWYŻEJ pozostałe dwa i wszystko wyrównane na dole?

Odpowiedzi:

0 dla odpowiedzi № 1

Usunąć:

height: 100%;

z elementu #mtx_bckgd

Nie ma też nic wspólnego z problemem, ale zmiany

<img src="/images/uwlogo.png" height="50px">

do

<img src="/images/uwlogo.png" height="50px" />

Ponieważ twój tag graficzny nie jest zamknięty


0 dla odpowiedzi nr 2

Mtx_bckgd zajmuje 100% szerokości i 100%wysokość (więc cały ekran). Stopka jest bezwzględna na dole, więc jest ponad mtx_bckgd i na dole ekranu.Drugie dwa pozostałe znaczniki div są na dole, ponieważ ponownie mtx_bckgd zajmuje cały ekran i muszą być po to.

Jaki układ chcesz osiągnąć?