Контейнерный фон не охватывает весь экран

-1

Я пытаюсь перепроектировать мой сайт с помощью div (ранее он был разработан с использованием таблиц). Проблема, с которой я сталкиваюсь, заключается в том, что фон контейнера ограничен только деаэром страницы, хотя весь контент находится в контейнере div.Контейнерный фон не охватывает весь экран

Кроме того, если я размещаю любой контент в div «content», «правая панель» проскальзывает в нижнюю часть раздела «content». Пожалуйста, помогите по обоим вопросам.

Мой код homepage.php:

<body> 
<div class="container"> 
    <?php 
    include "header1.php" 
    ?> 
     <div class="sidebarleft"><font class="common"> 
     <ul> 
     <li style="font-weight:bold; font-size:26; align:center;">Categories</li> 
     <li style="font-size:26;"><a href="pol_score_reset.php">Politics</a></li> 
     <li style="font-size:26;"><a href="ps_score_reset.php">Programming Skills</a></li> 
     <li style="font-size:26;"><a href="gk_score_reset.php">general knowledge</a></li> 
     </ul></font> 
     </div> 



     <div class="sidebarright"><font class="common"> 
     <--Google Adsense Ad--> 
     </font> 
     </div> 

</div> 
</body>

header1.php:

<div class="header"> 
<a href="homepage.php"><img class="logo" src="images/logo.png"/></a> 
    <div style="width:728px; height:20; float:right; margin-top:20px; margin-right:10px;"> 
    <-- Google AdSense Ad--> 

    </div> 
<br/> 
    <table width="100%" border="10"> 
     <tr> 
      <td width="16.7%"><a href="homepage.php"><em>Home</em></a></td> 
      <td width="16.7%"><a href="aboutus.php?us">About us</a></td> 
      <td width="16.7%"><a href="contactus.php?us">Contact us</a></td> 
      <td width="16.7%"><a href="privacy policy.php?us">Privacy policy</a></td> 
      <td width="16.7%"><a href="user_cp.php">Past Quizzes</a></td> 
      <td width="16.7%"><a href="logout.php">Logout</a></td> 
     </tr> 
    </table> 
</div> 
<br />

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

body 
    { 
    height:100%; 
    background-image:url(images/background.jpg); 
    background-position: top left; 
    background-attachment: fixed; 
    } 
     div.header{ 
     width:100%; 
     } 
     div.container{ 
     width:80%; 
     height:100%; 
     margin-left:10%; 
     margin-right:10%; 
     background:gray; 
     display:block; 
     } 
     div.sidebarleft{ 
     width:20%; 
     float:left; 
     } 
     div.contentmain{ 
     width:75%; 
     float:left; 
     } 
     div.sidebarright{ 
     width:20%; 
     float:right; 
}

источник

2013-09-21 Ankur Gupta

Вы могли бы предоставить [скрипку] (http://jsfiddle.net). Я подозреваю, что вам нужно разместить новый div после sidebarright с помощью css clear: оба, которые могут решить вашу проблему. – Martyn0627

Я не разбираюсь в Javascript и не могу предоставить скрипку. Можете ли вы объяснить немного больше? Я также включаю ссылку на страницу. Проверьте это. –

Попробуйте 'body {background: url (images/background.jpg); background-size: cover;' и убедитесь, что ваше фоновое изображение достаточно велико, чтобы покрыть весь экран или использовать какой-нибудь хороший шаблон;) – mdesdev

Изменить HTML для:

<body> 
<div class="container"> 
    <?php 
    include "header1.php" 
    ?> 
     <div class="sidebarleft"><font class="common"> 
     <ul> 
     <li style="font-weight:bold; font-size:26; align:center;">Categories</li> 
     <li style="font-size:26;"><a href="pol_score_reset.php">Politics</a></li> 
     <li style="font-size:26;"><a href="ps_score_reset.php">Programming Skills</a></li> 
     <li style="font-size:26;"><a href="gk_score_reset.php">general knowledge</a></li> 
     </ul></font> 
     </div> 



     <div class="sidebarright"><font class="common"> 
     <--Google Adsense Ad--> 
     </font> 
     </div> 
     <div class="clearfix"></div> 

</div> 
</body>

И добавить к вам CSS следующий стиль:

.clearfix{ 
    clear: both; 
}

Это просто делает Содержащий Див покрывающие эти дивы вы плавали слева.

источник

2013-09-21 13:22:15 Martyn0627

это сработало .. thank вы .. Можете ли вы предложить решение моей другой проблемы? –

Контейнерный фон не охватывает весь экран

ответ

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