css выровнять основную секцию и боковую панель по всей высоте без переполнения - PullRequest
Новая
       8

css выровнять основную секцию и боковую панель по всей высоте без переполнения

1 голос
/ 11 июля 2020

На моей странице есть заголовок, основная область (карта) и правая боковая панель. Мне нужна основная область 80% и боковая панель 20% с гибкостью дисплея, но я не могу ограничить переполнение. Не хочу отдавать свойство overflow:hidden.

image 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}


.wrapper{
    width: 100%;
    height: 100%;
}

.container{
    display: flex;    
}

.header{
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: gray;
    color: #FFF;
}

.mainsection{
    background-color: #ddd;
    width: 80%;
    height: 100vh;
}

.sidepanel{
    background-color: #eee;
    width:20%;
    height: 100vh;
}
<div>


  <div class="header">
    <header>
      <h1 class="">
        Urban Map
      </h1>
    </header>
  </div>

  <div class="container">
    <div class="mainsection">
     <P>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, natus. Excepturi, quasi perferendis? Eum impedit unde, vel tempore recusandae accusantium, quibusdam quo et, iure maxime nulla cumque est in cupiditate?
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi accusamus, quasi omnis eaque delectus repudiandae deleniti commodi debitis earum pariatur esse recusandae vitae cumque a, impedit maiores vero. Quibusdam, at?
</P>
    </div>
    <div class="sidepanel">
      <div >
  <P>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quibusdam necessitatibus inventore, molestias voluptates facilis quod eius optio dignissimos culpa, reprehenderit quas, impedit reiciendis facere ipsam ab nemo expedita tempore!
  </P>
<P>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe deserunt nulla modi aliquam iure perspiciatis at perferendis itaque temporibus, quod fugiat, id facilis similique minus. Dignissimos cumque deserunt aspernatur nostrum!

  </P>

</div>
    </div>




  </div>
</div>

Мне нужно предоставить раздел карты и боковую панель в полную высоту без переполнения.

1 Ответ

1 голос
/ 11 июля 2020

Используйте flex на основном контейнере, чтобы установить высоту дочерних элементов.

Не устанавливайте height: 100vh на .mainsection и .sidepanel, так как это не учитывает заголовок, который приводит к переполнению. 

#primary-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.container {
  flex: 1 0 80vh;
  display: flex;
}

.header {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: gray;
  color: #FFF;
}

.mainsection {
  background-color: #ddd;
  width: 80%;
  /* height: 100vh; */
}

.sidepanel {
  background-color: #eee;
  width: 20%;
  /* height: 100vh; */
}


/* ?? */
.wrapper {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
<div id="primary-container">
  <div class="header">
    <header>
      <h1 class="">
        Urban Map
      </h1>
    </header>
  </div>
  <div class="container">
    <div class="mainsection">
      <P>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, natus. Excepturi, quasi perferendis? Eum impedit unde, vel tempore recusandae accusantium, quibusdam quo et, iure maxime nulla cumque est in cupiditate? Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Excepturi accusamus, quasi omnis eaque delectus repudiandae deleniti commodi debitis earum pariatur esse recusandae vitae cumque a, impedit maiores vero. Quibusdam, at?
      </P>
    </div>
    <div class="sidepanel">
      <div>
        <P>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quibusdam necessitatibus inventore, molestias voluptates facilis quod eius optio dignissimos culpa, reprehenderit quas, impedit reiciendis facere ipsam ab nemo expedita tempore!
        </P>
        <P>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe deserunt nulla modi aliquam iure perspiciatis at perferendis itaque temporibus, quod fugiat, id facilis similique minus. Dignissimos cumque deserunt aspernatur nostrum!
        </P>
      </div>
    </div>
  </div>
</div>
...