CSS: Размер div для страницы с панелью навигации - PullRequest
Новая
       4

CSS: Размер div для страницы с панелью навигации

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

Я всюду искал ответ на эту проблему, но пока не нашел.

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

Я также не уверен, как отделить боковой элемент div от основного элемента div.В настоящее время я использую margin-left , как W3C делает , но это выглядит ужасно грязно, и его нужно менять всякий раз, когда меняется отступ.

Я не хочу, чтобы какие-либо элементы имели фиксированныйположение, если возможно. 

html, body {
	margin: 0;
	padding: 0;
}

#topnav {
	background-color: #00FF00;
	border-bottom: 2px solid black;
	overflow: hidden;
}

#sidenav {
	background-color: #FFFF00;
	border-right: 1px solid black;
	display: inline-block;
	height: 100%;
	overflow: scroll;
	padding: 8px;
	position: absolute;
	width: 200px;
}

#main {
	background-color: #FF00FF;
	display: inline-block;
	height: 100%;
	margin-left: 217px;
	padding: 8px;
	position: absolute;
	width: 100%;
	word-break: break-word;
}
<div id="topnav">
	<span>Top Navigator</span>
</div>
<div id="sidenav">
	<span>Side Navigator</span>
</div>
<div id="main">
	<span>Main Area</span>
</div>

Спасибо за любую помощь!

Ответы [ 6 ]

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

Я пробовал другой способ. 

const topnav_height = document.querySelector("#topnav").offsetHeight;

const parent = document.querySelector(".parent");

parent.style.height = "calc(100% - " + topnav_height + "px)";
html, body {
	margin: 0;
	padding: 0;
  height:100%;
}

* {
  box-sizing:border-box;
}

#topnav {
	background-color: #00FF00;
	border-bottom: 2px solid black;
	width:100%;
}

.parent {
  display:flex;
  height:100%;
}

#sidenav {
	background-color: #FFFF00;
	border-right: 1px solid black;
	height: 100%;
	overflow: scroll;
	padding: 8px;
  flex:1;
}

#main {
	background-color: #FF00FF;
	height: 100%;
	padding: 8px;
	word-break: break-word;
  flex:2;
}
<div id="topnav">
	<span>Top Navigator</span>
</div>
<div class="parent">
<div id="sidenav">
	<span>Side Navigator</span>
</div>
<div id="main">
	<span>Main Area</span>
</div>
</div>
0 голосов
/ 21 февраля 2019

Сделав несколько изменений в CSS и убедившись, что ваши отступы не влияют на ширину и высоту элементов, вы можете использовать следующее: 

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#topnav {
    width: 100%;
    height: 56px;
    background-color: #00FF00;
    border-bottom: 2px solid black;
    overflow: hidden;
}

#sidenav {
    background-color: #FFFF00;
    border-right: 1px solid black;
    display: inline-block;
    height: calc(100% - 56px);
    overflow: scroll;
    padding: 8px;
    position: absolute;
    width: 200px;
}

#main {
    background-color: #FF00FF;
    display: inline-block;
    height: calc(100% - 56px);
    margin-left: 200px;
    padding: 8px;
    position: absolute;
    width: calc(100% - 200px);
    word-break: break-word;
}
0 голосов
/ 21 февраля 2019

height: 100% представляет высоту вашей страницы, и, поскольку у вас есть верхняя панель, это нормально, что ваш контент больше, чем ваша страница, а затем появляются полосы прокрутки.

Вы должны использовать height: calc(100% - <height-of-your-top-bar>);вместо.Вы также можете использовать vh.

Вы также можете использовать CSS Grid , который идеально подходит для этого случая. 

body {
  display: grid;
  grid-template-rows: 80px calc(100vh - 80px);
  grid-template-columns: 200px auto;
}

#top {
  grid-column: 1 / span 2;
  
  background-color: green;
}

#side {
  background-color: red;
}

#main {
  background-color: blue;
}
<div id="top"></div>
<div id="side"></div>
<div id="main"></div>
0 голосов
/ 21 февраля 2019

Готово.Вам просто нужно добавить overflow: hidden; в ваш тег html, body. 

    *, *::before, *::after {
    box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
  overflow: hidden;
}

#topnav {
	background-color: #00FF00;
	border-bottom: 2px solid black;
	overflow: hidden;
  width:100%
}

#sidenav {
	background-color: #FFFF00;
	border-right: 1px solid black;
	display: inline-block;
	height: 100%;
	overflow: scroll;
	position: absolute;
	padding: 8px;
	width: 300px;
  overflow: scroll;
}

#main {
	background-color: #FF00FF;
	display: inline-block;
	height: 100%;
	margin-left: 300px;
	padding: 8px;
	position: absolute;
	width: calc(100% - 300px);
	word-break: break-word;
  overflow: scroll;
}
<div id="topnav">
	<span>Top Navigator</span>
</div>
<div id="sidenav">
	<span>Side Navigator</span>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem asperiores doloremque similique nulla atque illum tempora aperiam placeat doloribus cupiditate provident fugit unde, vitae suscipit amet dolor sunt excepturi ullam incidunt tenetur. Saepe laudantium facere perspiciatis voluptatem earum fuga sequi. Veniam aliquid ipsam enim nobis natus maxime blanditiis, beatae iusto illo numquam. Repellat, impedit quia quas sequi velit ipsa exercitationem earum illo corrupti id veniam dolore magni recusandae similique numquam in minus autem perspiciatis natus voluptatibus libero laudantium animi voluptas ullam! Nobis deserunt, iusto hic doloribus alias quos nulla obcaecati! Reiciendis, debitis quibusdam deleniti reprehenderit dolore cum ipsam sint eum. Possimus quae sed enim, molestiae, vel ratione cum ipsam explicabo odit, id nihil aut nam! Qui tempora vitae temporibus dolore voluptatibus dolor laboriosam et reiciendis necessitatibus doloribus, voluptas error labore repellendus repellat minus. Amet quae qui incidunt ipsum unde, mollitia culpa accusantium repellat aspernatur pariatur aliquid ipsa consequatur at quam maxime nesciunt eius fugit beatae. Animi officia quos placeat fugit voluptatibus quibusdam earum! Amet illo, deleniti magni aspernatur facere dolorum eum, quaerat quos laborum aliquam nulla perspiciatis error pariatur harum necessitatibus! Ullam perferendis ex sequi amet quis neque? Ducimus porro quaerat et, dolorum mollitia officiis animi qui, est error quibusdam ut maxime dicta aperiam veniam sunt eaque deleniti praesentium facere natus ea expedita? Dolore aperiam quo, nesciunt commodi temporibus facilis veniam modi dolores vero consectetur, ratione officia sed inventore repellendus tempore? Natus ullam non voluptatem magni. Rerum alias veniam, distinctio numquam nihil minus laudantium accusamus? Tempore unde doloribus rerum ipsum excepturi nostrum non, aperiam at velit ipsa fuga maiores rem sint repellat dolorem. Iste animi illum, iure, ea qui voluptatum illo unde vero sequi error voluptatibus quibusdam corrupti quidem. Harum natus, ratione, fuga, voluptate iure nam eligendi quos sapiente magni a nulla ut! Suscipit dolorum aliquam tempora reprehenderit ratione placeat esse pariatur soluta iusto. Perferendis laborum eligendi numquam et blanditiis molestiae explicabo modi deleniti earum. Porro deserunt laborum deleniti excepturi accusantium similique. Animi, saepe consequatur? Eveniet eligendi adipisci similique error molestias animi repellendus porro iure reiciendis modi exercitationem ab, ratione perferendis quod ea quasi! Repellendus, ipsa veniam. Ducimus, possimus, sit quae explicabo blanditiis atque tenetur praesentium consequuntur labore ab architecto tempore distinctio nulla! Architecto excepturi molestiae sit nihil ipsa. Blanditiis cumque praesentium itaque quibusdam dolores ad accusantium quia, omnis eveniet ipsam maxime pariatur, quis debitis ea exercitationem quod libero perspiciatis nobis quam iste? Distinctio saepe nihil blanditiis optio maxime? Animi delectus laboriosam dignissimos architecto nesciunt, necessitatibus incidunt dolores, ex cumque voluptatum facere earum expedita iure dolor omnis voluptate consequatur repellendus nisi reiciendis. Aperiam, commodi dolorem. Cum eligendi at dolorem iste, dolores delectus. Laboriosam, amet eligendi itaque delectus reprehenderit tempora sequi illo molestias totam doloribus rem laborum quas maxime quos error cum, nostrum in similique omnis veniam laudantium odit? Animi non ratione blanditiis distinctio suscipit quibusdam fuga, ab ducimus reprehenderit nobis possimus cupiditate iste earum cum tempore sint minus sequi ipsum. Iusto vel enim soluta aliquid facere sed, sint optio eos repellendus mollitia aperiam iure assumenda illo veniam saepe deleniti dolore.
</div>
<div id="main">
	<span>Main Area</span>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem asperiores doloremque similique nulla atque illum tempora aperiam placeat doloribus cupiditate provident fugit unde, vitae suscipit amet dolor sunt excepturi ullam incidunt tenetur. Saepe laudantium facere perspiciatis voluptatem earum fuga sequi. Veniam aliquid ipsam enim nobis natus maxime blanditiis, beatae iusto illo numquam. Repellat, impedit quia quas sequi velit ipsa exercitationem earum illo corrupti id veniam dolore magni recusandae similique numquam in minus autem perspiciatis natus voluptatibus libero laudantium animi voluptas ullam! Nobis deserunt, iusto hic doloribus alias quos nulla obcaecati! Reiciendis, debitis quibusdam deleniti reprehenderit dolore cum ipsam sint eum. Possimus quae sed enim, molestiae, vel ratione cum ipsam explicabo odit, id nihil aut nam! Qui tempora vitae temporibus dolore voluptatibus dolor laboriosam et reiciendis necessitatibus doloribus, voluptas error labore repellendus repellat minus. Amet quae qui incidunt ipsum unde, mollitia culpa accusantium repellat aspernatur pariatur aliquid ipsa consequatur at quam maxime nesciunt eius fugit beatae. Animi officia quos placeat fugit voluptatibus quibusdam earum! Amet illo, deleniti magni aspernatur facere dolorum eum, quaerat quos laborum aliquam nulla perspiciatis error pariatur harum necessitatibus! Ullam perferendis ex sequi amet quis neque? Ducimus porro quaerat et, dolorum mollitia officiis animi qui, est error quibusdam ut maxime dicta aperiam veniam sunt eaque deleniti praesentium facere natus ea expedita? Dolore aperiam quo, nesciunt commodi temporibus facilis veniam modi dolores vero consectetur, ratione officia sed inventore repellendus tempore? Natus ullam non voluptatem magni. Rerum alias veniam, distinctio numquam nihil minus laudantium accusamus? Tempore unde doloribus rerum ipsum excepturi nostrum non, aperiam at velit ipsa fuga maiores rem sint repellat dolorem. Iste animi illum, iure, ea qui voluptatum illo unde vero sequi error voluptatibus quibusdam corrupti quidem. Harum natus, ratione, fuga, voluptate iure nam eligendi quos sapiente magni a nulla ut! Suscipit dolorum aliquam tempora reprehenderit ratione placeat esse pariatur soluta iusto. Perferendis laborum eligendi numquam et blanditiis molestiae explicabo modi deleniti earum. Porro deserunt laborum deleniti excepturi accusantium similique. Animi, saepe consequatur? Eveniet eligendi adipisci similique error molestias animi repellendus porro iure reiciendis modi exercitationem ab, ratione perferendis quod ea quasi! Repellendus, ipsa veniam. Ducimus, possimus, sit quae explicabo blanditiis atque tenetur praesentium consequuntur labore ab architecto tempore distinctio nulla! Architecto excepturi molestiae sit nihil ipsa. Blanditiis cumque praesentium itaque quibusdam dolores ad accusantium quia, omnis eveniet ipsam maxime pariatur, quis debitis ea exercitationem quod libero perspiciatis nobis quam iste? Distinctio saepe nihil blanditiis optio maxime? Animi delectus laboriosam dignissimos architecto nesciunt, necessitatibus incidunt dolores, ex cumque voluptatum facere earum expedita iure dolor omnis voluptate consequatur repellendus nisi reiciendis. Aperiam, commodi dolorem. Cum eligendi at dolorem iste, dolores delectus. Laboriosam, amet eligendi itaque delectus reprehenderit tempora sequi illo molestias totam doloribus rem laborum quas maxime quos error cum, nostrum in similique omnis veniam laudantium odit? Animi non ratione blanditiis distinctio suscipit quibusdam fuga, ab ducimus reprehenderit nobis possimus cupiditate iste earum cum tempore sint minus sequi ipsum. Iusto vel enim soluta aliquid facere sed, sint optio eos repellendus mollitia aperiam iure assumenda illo veniam saepe deleniti dolore.
</div>
0 голосов
/ 21 февраля 2019

Если вы установите для #sidenav и #main значение height:80vh (высота области просмотра) и для #topnav значение height:20vh (вы можете изменить его на любое значение), тогда оно будет охватыватьОстальная часть вашей страницы.

Кроме того, я немного изменил ваш HTML / CSS, добавив display:flex, так что вам не нужно добавлять margin-left к вашему #main.

Попробуйте это: 

html,
body {
  margin: 0;
  padding: 0;
}

#topnav {
  background-color: #00FF00;
  width: 100%;
  height: 100px;
  border-bottom: 2px solid black;
}

.content {
  display: flex;
  height: calc(100vh - 102px);
}

#sidenav {
  background-color: #FFFF00;
  border-right: 1px solid black;
  width: 25%;
  overflow-y: scroll;
}

#main {
  background-color: #FF00FF;
  width: 75%;
  overflow-y: scroll;
}
<div id="topnav">
  <span>Top Navigator</span>
</div>
<div class="content">
  <div id="sidenav">
    <span>Side Navigator</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum felis vitae venenatis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt egestas ipsum, eu suscipit arcu condimentum
      quis. Donec vestibulum leo et turpis lobortis mattis nec quis velit. Etiam a libero cursus, placerat sem eget, pulvinar diam. Nullam commodo tortor nulla, vel eleifend est semper non. Morbi sit amet sapien lectus. Pellentesque mattis ultrices velit
      sit amet eleifend. Sed dignissim euismod nulla ut tincidunt. Nulla placerat enim libero, non aliquet purus dignissim sed. Mauris pharetra, mi non tincidunt feugiat, lectus tellus consectetur sapien, eu pharetra elit tellus et tellus. Nulla facilisi.
      Duis sapien metus, interdum in porttitor at, vehicula quis felis. Nullam aliquet eget eros quis rutrum. Nunc vitae nulla interdum, viverra ante id, elementum ex. Integer aliquet nisl eget eros mattis, vel porta lorem hendrerit. Fusce ante ligula,
      tincidunt ac iaculis nec, interdum eu purus. Mauris id sagittis urna. Ut id erat dui. Sed sit amet venenatis dolor. Pellentesque faucibus ex a leo feugiat, eu faucibus sem dapibus. Nullam ornare ex nec nisi vestibulum, et pellentesque purus bibendum.
      Curabitur eu feugiat urna, nec tempor tellus. Fusce tempus mi ut tristique aliquet. Ut vitae augue a magna lacinia suscipit. Phasellus pulvinar facilisis ultricies. Nullam ultrices, tortor in efficitur consequat, ipsum urna gravida nisi, at tincidunt
      eros ante id urna. Phasellus euismod porttitor lectus, id tincidunt neque facilisis in. Praesent condimentum rutrum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
  </div>
  <div id="main">
    <span>Main Area</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum felis vitae venenatis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt egestas ipsum, eu suscipit arcu condimentum
      quis. Donec vestibulum leo et turpis lobortis mattis nec quis velit. Etiam a libero cursus, placerat sem eget, pulvinar diam. Nullam commodo tortor nulla, vel eleifend est semper non. Morbi sit amet sapien lectus. Pellentesque mattis ultrices velit
      sit amet eleifend. Sed dignissim euismod nulla ut tincidunt. Nulla placerat enim libero, non aliquet purus dignissim sed. Mauris pharetra, mi non tincidunt feugiat, lectus tellus consectetur sapien, eu pharetra elit tellus et tellus. Nulla facilisi.
      Duis sapien metus, interdum in porttitor at, vehicula quis felis. Nullam aliquet eget eros quis rutrum. Nunc vitae nulla interdum, viverra ante id, elementum ex. Integer aliquet nisl eget eros mattis, vel porta lorem hendrerit. Fusce ante ligula,
      tincidunt ac iaculis nec, interdum eu purus. Mauris id sagittis urna. Ut id erat dui. Sed sit amet venenatis dolor. Pellentesque faucibus ex a leo feugiat, eu faucibus sem dapibus. Nullam ornare ex nec nisi vestibulum, et pellentesque purus bibendum.
      Curabitur eu feugiat urna, nec tempor tellus. Fusce tempus mi ut tristique aliquet. Ut vitae augue a magna lacinia suscipit. Phasellus pulvinar facilisis ultricies. Nullam ultrices, tortor in efficitur consequat, ipsum urna gravida nisi, at tincidunt
      eros ante id urna. Phasellus euismod porttitor lectus, id tincidunt neque facilisis in. Praesent condimentum rutrum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
  </div>

</div>
0 голосов
/ 21 февраля 2019

Попробуйте эту скрипку.Надеюсь, это то, что вы ищете

Попробуйте это 

*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}

#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
width:100%
}

#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: 100%;
overflow: scroll;
position: absolute;
padding: 8px;
width: 300px;
}

#main {
background-color: #FF00FF;
display: inline-block;
height: 100%;
margin-left: 300px;
padding: 8px;
position: absolute;
width: calc(100% - 300px);
word-break: break-word;
}
...