Как поместить контент под фиксированным заголовком или навигацией при открытии в браузере? - PullRequest
Новая
       0

Как поместить контент под фиксированным заголовком или навигацией при открытии в браузере?

1 голос
/ 19 февраля 2020

Здравствуйте, у меня проблема при создании заголовка с использованием html и css. У меня есть заголовок в фиксированной позиции, но содержимое закрыто моим заголовком. Я хочу, чтобы моя позиция контента находилась под заголовком при запуске. Еще один, я установил ширину заголовка 100%, но он сместился вправо, чтобы не покрывать всю ширину на экране. [ОБНОВЛЕНО]

enter image description here

<style>
@media(min-width: 468px) {
    body{
        background-color: aqua;
    }
    .container-1{
           display: flex; 
           /*
           align-items: flex-start;  -->box 1 lebih sempit ke atas
           align-items: flex-end;  -->box 1 lebih sempit ke bawah
           align-items: center;  -->box 1 lebih sempit ke tengah (atas bawah)
           flex-direction: column; -->flex box menjadi kolom
           */
        }
        .container-2{
            display: flex;
            /*
            justify-content: flex-end;
            justify-content: flex-start;
            */
            justify-content: space-between; /*ada spasi diantara kotak*/
        }
}
       .container-3{
           display: flex;
           flex-wrap: wrap;
       }
        
        .container-1 div, .container-2 div, .container-3 div{
            border:1px #000000 solid;
            padding:10px;
        }
        
        .box-1{
        flex:2;
        order:2;
        
        }
        .box-2{
            flex:1;
            order:1;
        }
        .box-3{
            flex: 1;
            order:3;
        }

        .container-2-box{
            flex-basis:20%;
        }

        .container-3-box{
            flex-basis: 10%;
            
        }
        header{
            padding: 0.5rem;
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: beige;
           position: fixed;
            width: 100%;
            margin:0;
			
        }
        .whole-container{
            margin-top:2.0rem;
            
        }
        </style>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Flexbox</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
</head>

<body>
    <header>
        <h1> Flexbox</h1>
    </header>
    <div class="whole-container">
    <div class="container-1"> 
        <div class="box-1">
            <h3>Box 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="box-2">
            <h3>Box 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="box-3">
            <h3>Box 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

    <div class="container-2"> 
        <div class="container-2-box">
            <h3>Box 4</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-2-box">
            <h3>Box 5</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-2-box">
            <h3>Box 6</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="container-3"> 
        <div class="container-3-box">
            <h3>Box 7</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 8</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">

            <h3>Box 9</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 10</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 11</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 12</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2020

body { margin: 0; }

body {
  margin: 0;
}

header {
  padding: 0.5rem;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: beige;
  position: fixed;
  width: 100%;
  /*not cover whole width*/
  margin: 0;
}

.whole-container {
  margin-top: 2.0rem;
}
<body>
  <header>
    0000
  </header>

</body>
0 голосов
/ 19 февраля 2020

Не видя ваш код HTML, это немного догадывается, но я дам ему go.

Добавление position: fixed к элементу заставит его течь над другим содержимым. Элемент вынимается из потока документов. Таким образом, перекрытие - это естественное поведение.

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

body {
   padding-top: 3rem; /* should be at least the height of the header*/
}

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

/* option 1, add a left position:*/
header {
   ... 
   left: 0;
}

/* option 2, remove the width, use left and right position instead: */
header {
   ... 
   /* width: 100%; remove this line */
   left: 0;
   right: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...