Как избавиться от лишнего пространства на нижнем колонтитуле?

В настоящее время я работаю над нижним колонтитулом для своего веб-сайта, и всякий раз, когда я помещаю что-то внутри класса нижнего колонтитула, кажется, есть какое-то пространство ниже всего, что я не уверен в том, как избавиться. Я просто хотел бы, чтобы нижний колонтитул был «срезан» или заканчивался после моих элементов, которые внутри него.Как избавиться от лишнего пространства на нижнем колонтитуле?

Вы можете просматривать мой веб-сайт, что я имею в виду жить here.
Дополнительное пространство, которое я имею в виду, это here.

footer.php

<div class="footer"> 
     <div class="footer_elements"> 
      <div class="useful_resources"> 
       <h1>Useful Resources</h1> 
        <p><a href="index.php">home</a></p> 
        <p><a href="#">graphics</a></p> 
        <p><a href="#">web</a></p> 
        <p><a href="#">contact</a></p> 
      </div> 
      <?php include 'includes/modules/connect.php' ?> 
      <?php include 'includes/modules/newsletter.php' ?> 

     </div> 
    </div> 

    </body>

styles.css:

.footer{width: 100%; max-width: 100%; height: 20px; margin-top: -50px; border-bottom: 30px solid #23262B;} 
.footer_elements{font-family: 'Raleway', sans-serif;} 
.footer_elements h1{font-size: 26px;} 
.footer_elements p{font-size: 18px;} 
.footer_elements p{margin-top: -10px;} 
.useful_resources{padding: 35px; color: white; float: left;} 
.useful_resources a{color: white; text-decoration: none;} 
.useful_resources a:hover{color: #CC7A29;} 

.connect{padding: 35px; color: white; overflow: hidden;} 
.connect a{color: white; text-decoration: none;} 
.connect img{width: 35px; float: left; margin-top: -2px;} 
.connect_bg{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;} 
.connect_bg:hover{background-color: #7AA3CC;} 
.connect_bg p{padding: 5px;} 
.connect_bg2{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;} 
.connect_bg2:hover{background-color: #1F5C99;} 
.connect_bg2 p{padding: 5px;} 
.connect_bg3{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;} 
.connect_bg3:hover{background-color: red;} 
.connect_bg3 p{padding: 5px;} 
.connect_bg3 img{margin-top: -7px;} 
.connect_bg4{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;} 
.connect_bg4:hover{background-color: #FF99CC;} 
.connect_bg4 p{padding: 5px;} 

.newsletter {margin-left: 25px; padding: 15px; width: 500px; border: 2px dashed white; border-radius: 30px; background-color: #393C40; font-family: 'Raleway', sans-serif; color: white; max-width: 600px; } 
.newsletter:hover{background-color: #1F5C99;} 
.newsletter p{font-size: 14px; margin-left: 25px; margin-top: -35px;} 
.heading{margin-left: 125px;}

Если нужны больше детали я могу предоставить. Заранее благодарю всех, у кого есть возможное решение для дополнительного пространства в нижнем колонтитуле.

С наилучшими пожеланиями, Коди

источник

2015-03-12 cscodismith

Я не уверен, но я думаю, что дополнительное пространство вы имеете в виду вызвано вашим DIV с классом «квадрат». Его атрибут height, «100%», добавляет общую высоту исходной страницы к нижней.

источник

2015-03-12 23:28:50 LeFex

Похоже, что это исправлялось по большей части, просто нужно было сделать еще несколько настроек в css, чтобы, наконец, заставить его функционировать так, как предполагалось, во всех разрешениях. Благодаря! – cscodismith

Как избавиться от лишнего пространства на нижнем колонтитуле?

ответ

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