Позиция абсолютная и маржа: авто

У меня небольшая проблема, я хочу, чтобы мой нижний колонтитул оставался внизу экрана с position: absolute. Но мой margin: auto, чтобы положить его в середину экрана, больше не работает.Позиция абсолютная и маржа: авто

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'> 
     <link rel="shortcut icon" href="../IMAGES/favicon.ico"> 
     <title>TEST</title> 
     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" href="../css/stylesheet.css"> 
    </head> 
    <body> 
     <div id="header"> 
      <div id="logo"> 
       <img src="../IMAGES/logo.png" /> 
      </div> 
      <div id="logotitel"> 
       Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken! 
      </div> 
     </div> 
     <div id="nav"> 
      <div id="links"> 
       <a href="index.php"><div class="link">Home</div></a> 
       <a href="wie.php"><div class="link">Wie is wie</div></a> 
       <a href="fotos.php"><div class="link">Foto's</div></a> 
       <a href="repertoire.php"><div class="link">Repertoire</div></a> 
       <a href="links.php"><div class="link">Links</div></a> 
       <a href="contact.php"><div class="link">Contact</div></a> 
      </div> 
     </div> 
     <div class="clear"></div> 
     <div id="content"> 
      TEST 
     </div> 
     <div class="clear"></div> 
     <div id="footer"> 
      <div id="copy"> 
       Developed by Yoshi &copy vAntstAd 
      </div> 
     </div> 
    </body> 
</html>

CSS:

/* PAGE LAYOUT */ 
html 
{ 
     padding: 0px; 
     margin: 0px; 
} 

body 
{ 
     background-image: url(../IMAGES/background.png); 
     padding: 0px; 
     margin: 0px; 
     color: white; 
     font-family: 'Source Sans Pro', serif, sans-serif; 
} 

.clear 
{ 
     clear: both; 
} 

/* HEADER */ 
#header 
{ 
     width: 1100px; 
     height: 150px; 
     background-color: #282828; 
     margin: auto; 
     border-bottom: solid; 
     border-color: red; 
} 

#logo 
{ 
     width: 283px; 
     height: 100px; 
     margin: auto; 
} 

#logotitel 
{ 
     width: 1100px; 
     height: 50px; 
     line-height: 50px; 
     text-align: center; 
     font-size: x-large; 
} 

/* NAV */ 
#nav 
{ 
     width: 1100px; 
     height: 50px; 
     margin-top: 25px; 
     margin-right: auto; 
     margin-left: auto; 
     margin-bottom: 25px; 
     background-color: red; 
} 

#links 
{ 
     width: 600px; 
     height: 50px; 
     margin: auto; 
} 

.link 
{ 
     width: 100px; 
     height: 50px; 
     line-height: 50px; 
     float: left; 
     text-align: center; 
     color: white; 
     text-decoration: none; 
} 

.link:hover 
{ 
     color: #282828; 
     text-decoration: underline; 
} 

/* CONTENT */ 

#content 
{ 
     width: 1100px; 
     height: auto; 
     margin: auto; 
     color: #282828; 
     position: relative; 
} 

/* FOOTER */ 

#footer 
{ 
     width: 1100PX; 
     height: 50px; 
     position: absolute; 
     bottom: 0; 
     margin: auto; 
     background-color: #282828; 
} 

#copy 
{ 
     width: auto; 
     float: right; 
     margin-right: 5px; 
     height: 50px; 
     line-height: 50px; 
}

источник

2013-04-12 Yoshi Peters

Ваш вопрос имеет совсем немного кода. Чтобы лучше помочь, опубликуйте [SSCCE (ссылка)] (http://sscce.org). – Doorknob

Anwnser можно найти здесь: http://stackoverflow.com/questions/9998260/css-absolute-position-wont-work-with-margin-leftauto-margin-right-auto –

Возможный дубликат: http: // stackoverflow. com/questions/9350775/set-position-absolute-and-margin – showdev

Поскольку вы знаете ширину сноски (1100px), вы можете просто сделать left:50%;margin-left:-550px в центре.

Пример: центрирование абсолютно позиционированного элемента
http://jsfiddle.net/vdWQG/

Поэтому сноска бы стать:

#footer 
{ 
    width: 1100PX; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
    left:50%;   /* Add this */ 
    margin-left:-550px; /* Add this (this is half of #footers width) */ 
    background-color: #282828; 
}

Если вы хотите, чтобы элемент наклеить на нижней части страницы, как пользователь прокручивает вниз, используйте position: fixed вместо position:absolute

источник

2013-04-12 00:44:20 Jace

Но это не работает, когда страница длиннее экрана, она остается на той позиции, которую она отобрала? первый. Он не остается на дне, когда я прокручиваю :( –

@YoshiPeters использует 'position: fixed' вместо' absolute'. Обновленный ответ – Jace

спасибо, теперь он работает, как я хочу! –

Чтобы иметь колонтитула в нижней части, по центру по горизонтали, можно применить следующий CSS:

footer{ 
    width: 100%; 
    max-width: 600px; 
    position: fixed; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: 0 auto; 
}

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

Смотрите это Fiddle для примера

источник

2015-10-16 09:40:09

Позиция абсолютная и маржа: авто

ответ

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