Как я могу сделать так, чтобы мой контент можно было прокручивать, сохраняя заголовок и нижний колонтитул в одном месте? - PullRequest
Новая
       24

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

0 голосов
/ 08 февраля 2019

Мне нужно сделать это так, хотя мой верхний и нижний колонтитулы остаются в верхней и нижней части страницы соответственно, содержимое в середине моей страницы остается прокручиваемым.Поскольку сейчас верхний и нижний колонтитулы остаются, но содержимое в середине не может быть прокручено, что, как я выяснил, не работает на некоторых экранах.Буду признателен за любую помощь.

Я пытался возиться с ней, и пока мне не повезло.

HTML: 

<div class="header">
    <p> The Official Site of Victor Alam </p>
</div>

<body>

<div class="nav">
<ul>
    <li><Home<li>
    <li>Education<li>
    <li>Work Experience<li>
    <li>Hobbies<li>
</ul>
</div>


<img src="IMAGE" alt="Me" class="center">

<div class="info">
    <p> BLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAH </p>
</div>

</body>


<div class="footer">
<ul>
    <li>BLAH BLAH</li>
    <li>BLAH BLAH</li>
    <li>BLAH BLAH</li>
</ul>
</div>

CSS: 

div.header 
{
    background-color:black;
    color:white;
    text-align:center;
    height:40px;
    padding:10px;
    font-size:120%;
    position:fixed;
    left:0;
    top:0;
    width: 100%;
}

div.nav
{
    text-align:center;
    position:fixed;
    left:0;
    top:60px;
    width: 100%;
    background-color: darkblue;
    color:white;
}

div.nav ul 
{
    list-style-type:none;
    margin:0px;
    overflow:hidden;}

div.nav li 
{
    float:left;
}

div.nav li a 
{
    display:block;
    color:white;
    text-align:center;
    padding:16px;
    text-decoration:none;
}

div.nav li a:hover 
{
    background-color:#111111;
}

.center
{
    padding-top:140px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:29%;
}

div.info
{
    color:black;
    text-align:center;
    padding-top:20px;
}

div.footer {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background-color:black;
    color:white;
    text-align:center;

}

div.footer ul {
    display:inline-block;
    list-style-type:none;
    overflow:hidden;

}

div.footer li {
    padding:10px;
    float:left;
    color:white;
}

The results are that it looks good on some monitors but on some it comes across as way to zoomed in and it won't let you scroll through the content.

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

Okk, так что вы можете использовать свойство CSS position:fixed;

. Присвойте свойство CSS position:fixed; как верхнему, так и нижнему колонтитулам разделов, которые будут статическими при прокрутке экрана

ПРИМЕЧАНИЕ. -> Не присваивать фиксированное свойство содержимому div

  • Сначала создайте содержимое div
  • и некоторый текст

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

0 голосов
/ 08 февраля 2019

Чтобы сделать прокрутку контейнера с помощью css, добавьте overflow: scroll.Ниже приведен пример очень простого верхнего и нижнего колонтитула, в котором верхний и нижний колонтитулы остаются сверху и снизу, а тело прокручивается.

HTML: 

<!DOCTYPE html>
<body>
<div class="header">
</div>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="footer">
</div>
</body>

CSS 

html{
  height: 100%;
}
body {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  height: 100%;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 50px;
  background: blue;
}

.content{
  display:flex;
  flex-grow:1;
  overflow-y: scroll;
}

.footer {
  width: 100%;
  height: 50px;
  background: red;
}

Для рабочего примера: https://jsfiddle.net/Matthew_/90gLy6nw/6/

...