2015-12-18 3 views
-1

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

#social-media { 
 
\t  width: 175px; 
 
\t  margin-left: auto; 
 
\t  margin-right: auto; 
 
\t  padding-top: 10%; 
 
    } 
 
    #social-media img { 
 
\t  padding: 5px; 
 
    } 
 
    #social-media ul li { 
 
\t  display: inline; 
 
    }
<div id="logo"></div> 
 
    <div class="search"> 
 
     <form action="search.php" method="get"> 
 
     <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40"> 
 
     <input type="submit" value="DRINK!"> 
 
     </form> 
 
    </div> 
 

 
    <div id="social-media"> 
 
    <img src="facebook2.png"> 
 
    <img src="twitter2.png"> 
 
    </div> 
 

Я пытаюсь прикрепить социальные медиа DIV к в нижней части страницы, независимо от того, какое устройство просматривает пользователь, возможно ли это сделать без оболочки?

+0

У вас уже есть оберточный элемент - так почему бы не использовать это? – CBroe

ответ

2

Если вы хотите, чтобы всегда появляются в нижней части экрана, а затем использовать

#social-media { 
    positioning: fixed; 
    bottom: 0; 
} 

Документацию по W3Schools можно найти here

Если вы хотите, чтобы убедиться, что он всегда на день фактической страницы (под другим содержанием), то попробуйте:

#social-media { 
    clear: both; 
} 
0

Вы, кажется, нуждаются в DIV чтобы быть «абсолютно» расположен в нижней части, например:

#social-media { 
 
    width: 175px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
} 
 
#social-media img { 
 
    padding: 5px; 
 
} 
 
#social-media ul li { 
 
    display: inline; 
 
}
<body> 
 
<div id="logo"></div> 
 
<div class="search"> 
 
    <form action="search.php" method="get"> 
 
    <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40"> 
 
    <input type="submit" value="DRINK!"> 
 
    </form> 
 
</div> 
 

 
<div id="social-media"> 
 
<img src="facebook2.png"> 
 
<img src="twitter2.png"> 
 
</div> 
 

 
</body>

+0

Когда я это делаю, он перекрывает div, который у меня есть на моей странице результатов поиска, любые идеи? – DavidDuffy95

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