проблема нижнего колонтитула HTML - PullRequest
Новая
       8

проблема нижнего колонтитула HTML

0 голосов
/ 25 августа 2011

Я новичок в html и у меня возникли проблемы с добавлением нижнего колонтитула.Более конкретно, когда я добавляю нижний колонтитул, «форма» вытягивается до тех пор, пока не достигнет нижнего колонтитула - как это http://tinypic.com/view.php?pic=jhbw5g&s=7.Как я могу остановить его от расширения тела формы?

html code 

<body>
    <div id="formWrapper">
            </center>
          <form method ="post" action="addMember.php">
          <label for="name">Username:</label>
          <input name="name"/>
          <label for="password">Password:</label>
          <input name="password"/>
          <label for="email">Email:</label>
          <input name="email"/>
            <p>
            <fieldset>
            <input class="btn" name="submit" type="Submit" value="Register"/>
            <input class="btn" name="reset" type="reset" value="Clear Form">
            </fieldset>
      </form>

     <div class="push"></div></div>
         <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
</body>

Таблица стилей 

#formWrapper{
    width:400px;
    border:solid 5px #F1F1F1;
    margin-top:300;
    margin-bottom:10;
    margin-right: auto;
    margin-left: auto;
    background-color: #AFC8DE;
    padding-top: 10px;

    min-height: 100%;
    height: auto !important;
    height: 100%;   

}

html, body {height: 100%;}

.push {background-color: # 903;поле: 50px;}

.footer {height: 4em;цвет фона: # 103;}

Точнее, min-height: 100%; заставляет его тянуть, но не знает, как это исправить.

Ответы [ 3 ]

0 голосов
/ 25 августа 2011

Попробуйте что-то вроде этого .. 

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

и CSS .. 

html, body {margin:0; padding:0; height:100%;}
#container {min-height:100%; position:relative;}
#body {padding:10px; padding-bottom:60px; /* Height of the footer */}
#footer {position:absolute; bottom:0; width:100%; height:60px;   /* Height of the footer */;

}

0 голосов
/ 25 августа 2011

Я не знаю, каковы именно ваши потребности, но для одного ваш div нижнего колонтитула находится внутри оболочки формы, поэтому он будет соответствовать высоте любой оболочки.

http://jsfiddle.net/7SgGT/ Вот то, что я быстро соединил. Это должно помочь вам начать то, что вы ищете, я верю.

0 голосов
/ 25 августа 2011

В вашем HTML-коде есть несколько проблем, которые были опубликованы.

  • конечный тег "center" без начала
  • второй тег input не закрыт
  • пустой тег div.push?
  • отступы не совпадают (возможно, из-за форматирования stackoverflow?)

Пожалуйста, пересмотрите ваш HTML и отредактируйте вопрос с обновленным HTMLесли проблема не решается.

...