2015-11-28 6 views
0

Прошу прощения за то, что вы не смогли создать много кода, иначе мое задание можно было бы определить как плагиат. После этого урока я смог создать липкий нижний колонтитул, когда у вас нет боковых панелей. Попытка сделать то же самое с 2-дивы -> «левой боковой панели» и «правой боковой панели» Я получил это: enter image description hereХранение нижнего колонтитула на дне с двумя разделителями по бокам и основным содержимым

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 
#wrapper { 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 
header { 
 
    padding: 10px; 
 
} 
 
footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 40px; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #fff; 
 
    background: #333; 
 
} 
 
#main-content { 
 
    position: absolute; 
 
    width: 60%; 
 
    margin-left: 15%; 
 
    padding-bottom: 40px; 
 
    /* Height of the footer */ 
 
} 
 
#left-sidebar { 
 
    width: 15%; 
 
    position: absolute; 
 
    left: 0; 
 
    word-wrap: break-word; 
 
    padding-bottom: 40px; 
 
} 
 
#right-sidebar { 
 
    right: 0; 
 
    position: absolute; 
 
    width: 15%; 
 
    word-wrap: break-word; 
 
    padding-bottom: 40px; 
 
}
<body> 
 
    <div id="wrapper"> 
 
    
 
    <header> 
 
    </header> 
 
    
 
    <div id="left-sidebar"> 
 
    </div> 
 
    
 
    <div id="main-content"> 
 
    </div> 
 
    
 
    <div id="right-sidebar"> 
 
    </div> 
 
    
 
    <footer> 
 
    </footer> 
 
    
 
    </div> 
 
</body> 
 

Мой метод основан на признании позиции обертка как относительный, а внутренние элементы - как абсолютные. Я знаю, что есть еще один метод, когда объявление позиции нижнего колонтитула относительно, а затем запись его вне оболочки. Если бы можно было предоставить оба решения, я был бы очень счастлив! Благодаря!

@I я изучает возможности, так что я пытаюсь решить эту проблему без «толчка» сОн

@What Я на самом деле хочу, чтобы достичь это макет MOCKUP

И я не хочу использовал фиксированное положение для нижнего колонтитула, потому что он будет придерживаться нижней части моего окна, а не «страницы»

Я просто не понимаю этих глупых ненавистников, ниспровергающих ни для чего, по крайней мере, вы могли бы комментировать и кричать!

+0

Я запутался, что именно вы хотите в конце концов (это сноска должен содержаться на левой/правых боковые панелях ли они липкие? также, или они имеют отрезок высоты? и т. д.). Более точное описание или макет того, что вы хотите в конце, было бы более полезным для меня. В любом случае, в конце концов, я использовал бы «position: fixed» вместо абсолютного на липком нижнем колонтитуле, это место для начала. –

+0

Да, извините, я знал, что что-то забуду. Я загрузил макет и аргументировал ваше предложение :) Надеюсь, вы понимаете! – Maxitj

ответ

1

Вы могли бы добиться того, что, как это:

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin: 0 0 40px; /* bottom = footer height */ 
 
} 
 
footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 40px; 
 
    width: 100%; 
 
    background: #333; 
 
} 
 
header { 
 
    padding: 10px; 
 
    background: #333; 
 
} 
 
#wrapper { 
 
    min-height: 100%; 
 
    position: relative; 
 
    font-size: 0px; 
 
} 
 
#main-content { 
 
    width: 60%; 
 
    margin-right: 10%; 
 
    padding-bottom: 40px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-size: 16px; 
 
} 
 
#left-sidebar { 
 
    width: 15%; 
 
    padding-bottom: 40px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-size: 16px; 
 
} 
 
#right-sidebar { 
 
    width: 15%; 
 
    padding-bottom: 40px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-size: 16px; 
 
}
<header></header> 
 
<div id="wrapper"> 
 
    <div id="left-sidebar"></div> 
 
    <div id="main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    <div id="right-sidebar"></div> 
 
</div> 
 
<footer></footer>

+0

Сообщите мне, если он не работает для вас. – Anonymous

+1

Он отлично работает, мне просто нужно немного подождать, чтобы подобрать некоторые другие решения (любопытный парень, который хочет учиться: P). Пока ты самый элегантный, спасибо :)! – Maxitj

0

http://plnkr.co/edit/roZhOyMUxkFmpsYr9tKW?p=preview

html, 
 
body { 
 
    box-sizing: border-box; 
 
    font: 400 16px/1.5'Palatino Linotype'; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    overflow: hidden; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
body { 
 
    background-color: #222; 
 
    color: #EFE; 
 
    font-variant: small-caps; 
 
    overflow: hidden; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
.shell { 
 
    position: relative; 
 
    padding: 1.5em .75em; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.content { 
 
    position: absolute; 
 
    left: 17vw; 
 
    top: 10vh; 
 
    outline: 3px dashed yellow; 
 
    width: 66vw; 
 
    height: 100vh; 
 
    overflow-y: auto; 
 
    padding: 15px; 
 
} 
 
header, 
 
footer { 
 
    width: 100%; 
 
    height: 10vh; 
 
    position: fixed; 
 
    left: 0; 
 
    outline: 2px solid cyan; 
 
    padding: 12px; 
 
    z-index: 100; 
 
    background-color: hsla(160, 0%, 181%, .4); 
 
} 
 
footer { 
 
    margin-top: 1.5em; 
 
    bottom: 0; 
 
} 
 
header { 
 
    margin-bottom: 1.5em; 
 
    top: 0; 
 
} 
 
article { 
 
    outline: 3px dashed white; 
 
    height: 100%; 
 
} 
 
section { 
 
    width: 100%; 
 
    outline: 1px solid lime; 
 
    height: 20vh; 
 
} 
 
.left, 
 
.right { 
 
    outline: 2px solid red; 
 
    position: absolute; 
 
    top: 10vh; 
 
    width: 23vh; 
 
    height: 80vh; 
 
    padding: 5px; 
 
} 
 
.left { 
 
    left: 0; 
 
} 
 
.right { 
 
    right: 0; 
 
}
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <link href="style.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div class="shell"> 
 
    <header> 
 
     <h1>H1 - Header</h1> 
 
    </header> 
 

 
    <nav class="left"> 
 
     <h4>H4 - Nav</h4> 
 
    </nav> 
 

 
    <main class="content"> 
 
     <h1>H1 - Main</h1> 
 
     <article class="blog"> 
 
     <h2>H2 - Article</h2> 
 
     <section id="intro"> 
 
      <h3>H3 - Section - Introduction</h3> 
 
     </section> 
 
     <section id="part1"> 
 
      <h3>H3 - Section - Part 1</h3> 
 
     </section> 
 
     <section id="part2"> 
 
      <h3>H3 - Section - Part 2</h3> 
 
     </section> 
 
     <section id="part3"> 
 
      <h3>H3 - Section - Part 3</h3> 
 
     </section> 
 
     </article> 
 

 
    </main> 
 

 
    <aside class="right"> 
 
     <h4>H4 - Aside</h4> 
 
    </aside> 
 

 
    <footer> 
 
     <h3>H3 - Footer</h3> 
 
    </footer> 
 

 
    </div> 
 
</body> 
 

 
</html>

0

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

Добавьте это в CSS заголовок:

position: fixed; 
width: 100%; 
z-index: 999; 

Просто измените CSS колонтитула от «абсолютного» позиционирования, к «фиксированному», как так:

position: fixed; 
+0

Na, на самом деле, как я уже говорил, фиксированный footer не то, что я искал. Но все равно спасибо! – Maxitj