Граница страницы не отображается правильно

Я только что изменил свой тег div контейнера, чтобы автоматически увеличивать его высоту, но теперь у меня проблема с границей, она видна только на самой верхней части страницы, и мне нужно ее показать вокруг, код страницы ниже:Граница страницы не отображается правильно

<!doctype html> 
<html> 
<head> 
<title>Home Page</title> 
</head> 
<body> 
<div id="container" style="width:500px; border: 2px solid black; margin:auto"> 

<?php include "header.php"; ?> 

<div id="content" style="background-color:#EEEEEE; clear:both; width:500px; float: left"> 
<p align="center"><b>Quiz 1</b></p> 
// There is some more code in the page 
</div> 

<?php include "footer.php"; ?> 

</div> 
</body> 
</html>

header.php:

<div id="header" style="background-color:#FFA500; width:500px; clear:both; height:75px; float: left" align="center"> 
    <h1>Quiz Name</h1> 
</div>

footer.php:

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center; width:500px; height:25px; float: left"> 
    Copyright/Disclaimer 
</div>

источник

2013-12-15 Omax

На самом деле вы не установили его расширения в высоту. Вы просто сделали его центром с «margin: auto». – MikeSmithDev

У меня была высота, но я читаю, что удаление атрибута height автоматически расширит страницу. – Omax

Ну, это расширит его до размера его содержимого. На Stack Overflow есть много ответов, которые показывают, как сделать div автоматически высотой страницы. – MikeSmithDev

Ваша главная проблема в том, что все плывет. Вам нужно очистить эти плавающие элементы для этого контейнера div, чтобы они отображались правильно. Один из способов заключается в добавлении очистное div перед </div> для контейнера: <div style="clear:both;"></div>

 <div style="clear:both;"></div> 
    </div> 
</body> 
</html>

источник

2013-12-15 18:21:29 MikeSmithDev

спасибо, это сработало – Omax

Попробуйте добавить этот код перед </body>:

<div style="clear:both;"></div>

источник

2013-12-15 18:21:22

Граница страницы не отображается правильно

ответ

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