0

Eu estou criando um layout no qual os menus principais do site ficam a esquerda, e a direita ficam o conteúdo do site, abram na página toda para ficar melhor de visualizar:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html, body {
          width: 100%;
          height: 100%;
          font-family: arial;
      }

      nav {
          width: 300px;
          height: 100%;
          border: 1px solid black;
          background: silver;
      }

      ul {
          margin: 0;
          padding: 0;
          list-style: none;
          margin-top: 50px;
      }

      a {
          display: block;
          text-decoration: none;
          background: black;
          margin: 10px;
          padding: 10px;
          color: white;
      }

      nav, section {
          float: left;
      }

      section {
          width: 900px;
          padding: 50px;
      }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </nav>
    <section>
        <h1>Lorem Ipsum</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum quis erat sed egestas. Fusce magna nisl, blandit eget lacinia vel, tincidunt ac ex. Aenean quis blandit augue. Nulla suscipit lorem sagittis, gravida nisl non, luctus sapien. In hac habitasse platea dictumst. Aenean non lorem dui. Nunc pulvinar vehicula lacus, et feugiat eros lobortis eget. In malesuada eget eros id bibendum. Vestibulum eu interdum tellus, vel blandit eros. Vivamus dignissim augue ac posuere luctus.

Praesent id ligula ex. Phasellus sit amet pulvinar leo, quis varius dolor. Donec consequat massa nec nibh varius, ac tincidunt nibh sollicitudin. Praesent finibus nunc odio, vitae mattis orci laoreet quis. Pellentesque pharetra sagittis nunc, eget iaculis leo dictum eu. Fusce eget imperdiet libero. Phasellus ex lectus, varius vel metus a, imperdiet cursus augue. Nunc cursus ipsum in turpis interdum euismod. Aliquam vitae hendrerit mauris, ac euismod elit. Ut lorem velit, cursus a nulla at, fermentum porttitor ipsum. Nunc laoreet scelerisque vestibulum. Vestibulum iaculis feugiat tortor, eget varius metus sodales non. Aenean eu augue at sem bibendum feugiat. Nam pulvinar leo a lorem ultrices, a mattis metus luctus. Nunc sed scelerisque neque.

Aenean ac ante nunc. In mattis nibh et felis ornare rutrum. Nullam interdum faucibus metus eu suscipit. Aenean vel nibh diam. Vivamus eu ex sit amet enim sodales vehicula nec at nisi. Praesent dapibus sed lectus non vehicula. In lacinia mi sagittis scelerisque tincidunt. Aliquam ante eros, elementum eu volutpat in, imperdiet eget metus.

Aliquam volutpat venenatis purus sed egestas. Fusce accumsan mattis sapien, sed sagittis lorem vehicula ac. In interdum mi non arcu pharetra, eu aliquet turpis suscipit. Nullam venenatis neque nec nisi eleifend rhoncus. Curabitur tristique placerat blandit. Ut interdum tortor ut luctus finibus. Morbi eu ultricies dolor. Integer nec egestas risus, eget elementum purus. Aenean nec lacinia est, et egestas velit. Cras ipsum metus, fermentum vitae facilisis in, suscipit vel nisl. Mauris congue sem sit amet efficitur vehicula. Praesent euismod, libero ut tempus suscipit, leo nunc condimentum eros, vitae finibus nibh leo et diam. Morbi scelerisque, massa eget luctus sagittis, justo metus pretium purus, id sodales est tellus finibus magna. Quisque vel eros a eros malesuada placerat et ut lorem.

Nunc quis diam eget nisl aliquam varius in sagittis sem. Pellentesque viverra hendrerit metus sit amet mattis. Sed ut fringilla lacus. Phasellus ultrices volutpat ante a commodo. Etiam eget porttitor leo. Nulla viverra id libero ut fermentum. Sed eget ullamcorper est. Fusce sem ex, blandit porta sem id, suscipit venenatis urna. Phasellus quis tellus non sem convallis eleifend nec non elit. Suspendisse dictum rutrum porttitor.
        </p>
    </section>
</body>
</html>

O que acontece é que eu preciso que o menu fique fixo ao lado esquerdo da tela, mas o que acontecendo é que quando eu defino o position: fixed no nav o conteúdo fica fixo, mas o conteúdo a direita é jogado para abaixo dos menus, para criar um scroll eu defini a section com height: 1400px.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html, body {
          width: 100%;
          height: 100%;
          font-family: arial;
      }

      nav {
          width: 300px;
          height: 100%;
          border: 1px solid black;
          background: silver;
          position: fixed;
      }

      ul {
          margin: 0;
          padding: 0;
          list-style: none;
          margin-top: 50px;
      }

      a {
          display: block;
          text-decoration: none;
          background: black;
          margin: 10px;
          padding: 10px;
          color: white;
      }

      nav, section {
          float: left;
      }

      section {
          width: 900px;
          height: 1400px;
          padding: 50px;
      }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </nav>
    <section>
        <h1>Lorem Ipsum</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum quis erat sed egestas. Fusce magna nisl, blandit eget lacinia vel, tincidunt ac ex. Aenean quis blandit augue. Nulla suscipit lorem sagittis, gravida nisl non, luctus sapien. In hac habitasse platea dictumst. Aenean non lorem dui. Nunc pulvinar vehicula lacus, et feugiat eros lobortis eget. In malesuada eget eros id bibendum. Vestibulum eu interdum tellus, vel blandit eros. Vivamus dignissim augue ac posuere luctus.

Praesent id ligula ex. Phasellus sit amet pulvinar leo, quis varius dolor. Donec consequat massa nec nibh varius, ac tincidunt nibh sollicitudin. Praesent finibus nunc odio, vitae mattis orci laoreet quis. Pellentesque pharetra sagittis nunc, eget iaculis leo dictum eu. Fusce eget imperdiet libero. Phasellus ex lectus, varius vel metus a, imperdiet cursus augue. Nunc cursus ipsum in turpis interdum euismod. Aliquam vitae hendrerit mauris, ac euismod elit. Ut lorem velit, cursus a nulla at, fermentum porttitor ipsum. Nunc laoreet scelerisque vestibulum. Vestibulum iaculis feugiat tortor, eget varius metus sodales non. Aenean eu augue at sem bibendum feugiat. Nam pulvinar leo a lorem ultrices, a mattis metus luctus. Nunc sed scelerisque neque.

Aenean ac ante nunc. In mattis nibh et felis ornare rutrum. Nullam interdum faucibus metus eu suscipit. Aenean vel nibh diam. Vivamus eu ex sit amet enim sodales vehicula nec at nisi. Praesent dapibus sed lectus non vehicula. In lacinia mi sagittis scelerisque tincidunt. Aliquam ante eros, elementum eu volutpat in, imperdiet eget metus.

Aliquam volutpat venenatis purus sed egestas. Fusce accumsan mattis sapien, sed sagittis lorem vehicula ac. In interdum mi non arcu pharetra, eu aliquet turpis suscipit. Nullam venenatis neque nec nisi eleifend rhoncus. Curabitur tristique placerat blandit. Ut interdum tortor ut luctus finibus. Morbi eu ultricies dolor. Integer nec egestas risus, eget elementum purus. Aenean nec lacinia est, et egestas velit. Cras ipsum metus, fermentum vitae facilisis in, suscipit vel nisl. Mauris congue sem sit amet efficitur vehicula. Praesent euismod, libero ut tempus suscipit, leo nunc condimentum eros, vitae finibus nibh leo et diam. Morbi scelerisque, massa eget luctus sagittis, justo metus pretium purus, id sodales est tellus finibus magna. Quisque vel eros a eros malesuada placerat et ut lorem.

Nunc quis diam eget nisl aliquam varius in sagittis sem. Pellentesque viverra hendrerit metus sit amet mattis. Sed ut fringilla lacus. Phasellus ultrices volutpat ante a commodo. Etiam eget porttitor leo. Nulla viverra id libero ut fermentum. Sed eget ullamcorper est. Fusce sem ex, blandit porta sem id, suscipit venenatis urna. Phasellus quis tellus non sem convallis eleifend nec non elit. Suspendisse dictum rutrum porttitor.
        </p>
    </section>
</body>
</html>

Eu poderia mover a section para a direita usando position, margin, etc, mas vai surgir vários problemas:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html, body {
          width: 100%;
          height: 100%;
          font-family: arial;
      }

      nav {
          width: 300px;
          height: 100%;
          border: 1px solid black;
          background: silver;
          position: fixed;
      }

      ul {
          margin: 0;
          padding: 0;
          list-style: none;
          margin-top: 50px;
      }

      a {
          display: block;
          text-decoration: none;
          background: black;
          margin: 10px;
          padding: 10px;
          color: white;
      }

      nav, section {
          float: left;
      }

      section {
          width: 900px;
          height: 1400px;
          padding: 50px;
          margin-left: 300px;
      }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </nav>
    <section>
        <h1>Lorem Ipsum</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum quis erat sed egestas. Fusce magna nisl, blandit eget lacinia vel, tincidunt ac ex. Aenean quis blandit augue. Nulla suscipit lorem sagittis, gravida nisl non, luctus sapien. In hac habitasse platea dictumst. Aenean non lorem dui. Nunc pulvinar vehicula lacus, et feugiat eros lobortis eget. In malesuada eget eros id bibendum. Vestibulum eu interdum tellus, vel blandit eros. Vivamus dignissim augue ac posuere luctus.

Praesent id ligula ex. Phasellus sit amet pulvinar leo, quis varius dolor. Donec consequat massa nec nibh varius, ac tincidunt nibh sollicitudin. Praesent finibus nunc odio, vitae mattis orci laoreet quis. Pellentesque pharetra sagittis nunc, eget iaculis leo dictum eu. Fusce eget imperdiet libero. Phasellus ex lectus, varius vel metus a, imperdiet cursus augue. Nunc cursus ipsum in turpis interdum euismod. Aliquam vitae hendrerit mauris, ac euismod elit. Ut lorem velit, cursus a nulla at, fermentum porttitor ipsum. Nunc laoreet scelerisque vestibulum. Vestibulum iaculis feugiat tortor, eget varius metus sodales non. Aenean eu augue at sem bibendum feugiat. Nam pulvinar leo a lorem ultrices, a mattis metus luctus. Nunc sed scelerisque neque.

Aenean ac ante nunc. In mattis nibh et felis ornare rutrum. Nullam interdum faucibus metus eu suscipit. Aenean vel nibh diam. Vivamus eu ex sit amet enim sodales vehicula nec at nisi. Praesent dapibus sed lectus non vehicula. In lacinia mi sagittis scelerisque tincidunt. Aliquam ante eros, elementum eu volutpat in, imperdiet eget metus.

Aliquam volutpat venenatis purus sed egestas. Fusce accumsan mattis sapien, sed sagittis lorem vehicula ac. In interdum mi non arcu pharetra, eu aliquet turpis suscipit. Nullam venenatis neque nec nisi eleifend rhoncus. Curabitur tristique placerat blandit. Ut interdum tortor ut luctus finibus. Morbi eu ultricies dolor. Integer nec egestas risus, eget elementum purus. Aenean nec lacinia est, et egestas velit. Cras ipsum metus, fermentum vitae facilisis in, suscipit vel nisl. Mauris congue sem sit amet efficitur vehicula. Praesent euismod, libero ut tempus suscipit, leo nunc condimentum eros, vitae finibus nibh leo et diam. Morbi scelerisque, massa eget luctus sagittis, justo metus pretium purus, id sodales est tellus finibus magna. Quisque vel eros a eros malesuada placerat et ut lorem.

Nunc quis diam eget nisl aliquam varius in sagittis sem. Pellentesque viverra hendrerit metus sit amet mattis. Sed ut fringilla lacus. Phasellus ultrices volutpat ante a commodo. Etiam eget porttitor leo. Nulla viverra id libero ut fermentum. Sed eget ullamcorper est. Fusce sem ex, blandit porta sem id, suscipit venenatis urna. Phasellus quis tellus non sem convallis eleifend nec non elit. Suspendisse dictum rutrum porttitor.
        </p>
    </section>
</body>
</html>

Primeiro que quando eu redimensionar a página como a section que foi definida para 900px de largura, ela vai criar um scroll na horizontal e isso não é para acontecer.

NOTEM: Esse são os exemplos de layout que estou tentando fazer Layout 1, Layout 2, Layout 3, Layout 4, não precisa ser exatamente igual, mas os conteúdos são baseados nos exemplo acima.

1 Resposta 1

2

Você poderia fazer a section ficar responsiva usando a função calc() no valor do width, deduzindo a largura do menu de 300px da largura total da tela:

width: calc(100% - 300px);

Atente-se que a sintaxe do calc é bem estrita, é preciso ter os espaços antes e depois do operador -, ou seja, isso calc(100%-300px) não irá funcionar.

Veja:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html, body {
          width: 100%;
          height: 100%;
          font-family: arial;
      }

      nav {
          width: 300px;
          height: 100%;
          border: 1px solid black;
          background: silver;
          position: fixed;
      }

      ul {
          margin: 0;
          padding: 0;
          list-style: none;
          margin-top: 50px;
      }

      a {
          display: block;
          text-decoration: none;
          background: black;
          margin: 10px;
          padding: 10px;
          color: white;
      }

      nav, section {
          float: left;
      }

      section {
          width: calc(100% - 300px);
          height: 1400px;
          padding: 50px;
          margin-left: 300px;
      }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </nav>
    <section>
        <h1>Lorem Ipsum</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum quis erat sed egestas. Fusce magna nisl, blandit eget lacinia vel, tincidunt ac ex. Aenean quis blandit augue. Nulla suscipit lorem sagittis, gravida nisl non, luctus sapien. In hac habitasse platea dictumst. Aenean non lorem dui. Nunc pulvinar vehicula lacus, et feugiat eros lobortis eget. In malesuada eget eros id bibendum. Vestibulum eu interdum tellus, vel blandit eros. Vivamus dignissim augue ac posuere luctus.

Praesent id ligula ex. Phasellus sit amet pulvinar leo, quis varius dolor. Donec consequat massa nec nibh varius, ac tincidunt nibh sollicitudin. Praesent finibus nunc odio, vitae mattis orci laoreet quis. Pellentesque pharetra sagittis nunc, eget iaculis leo dictum eu. Fusce eget imperdiet libero. Phasellus ex lectus, varius vel metus a, imperdiet cursus augue. Nunc cursus ipsum in turpis interdum euismod. Aliquam vitae hendrerit mauris, ac euismod elit. Ut lorem velit, cursus a nulla at, fermentum porttitor ipsum. Nunc laoreet scelerisque vestibulum. Vestibulum iaculis feugiat tortor, eget varius metus sodales non. Aenean eu augue at sem bibendum feugiat. Nam pulvinar leo a lorem ultrices, a mattis metus luctus. Nunc sed scelerisque neque.

Aenean ac ante nunc. In mattis nibh et felis ornare rutrum. Nullam interdum faucibus metus eu suscipit. Aenean vel nibh diam. Vivamus eu ex sit amet enim sodales vehicula nec at nisi. Praesent dapibus sed lectus non vehicula. In lacinia mi sagittis scelerisque tincidunt. Aliquam ante eros, elementum eu volutpat in, imperdiet eget metus.

Aliquam volutpat venenatis purus sed egestas. Fusce accumsan mattis sapien, sed sagittis lorem vehicula ac. In interdum mi non arcu pharetra, eu aliquet turpis suscipit. Nullam venenatis neque nec nisi eleifend rhoncus. Curabitur tristique placerat blandit. Ut interdum tortor ut luctus finibus. Morbi eu ultricies dolor. Integer nec egestas risus, eget elementum purus. Aenean nec lacinia est, et egestas velit. Cras ipsum metus, fermentum vitae facilisis in, suscipit vel nisl. Mauris congue sem sit amet efficitur vehicula. Praesent euismod, libero ut tempus suscipit, leo nunc condimentum eros, vitae finibus nibh leo et diam. Morbi scelerisque, massa eget luctus sagittis, justo metus pretium purus, id sodales est tellus finibus magna. Quisque vel eros a eros malesuada placerat et ut lorem.

Nunc quis diam eget nisl aliquam varius in sagittis sem. Pellentesque viverra hendrerit metus sit amet mattis. Sed ut fringilla lacus. Phasellus ultrices volutpat ante a commodo. Etiam eget porttitor leo. Nulla viverra id libero ut fermentum. Sed eget ullamcorper est. Fusce sem ex, blandit porta sem id, suscipit venenatis urna. Phasellus quis tellus non sem convallis eleifend nec non elit. Suspendisse dictum rutrum porttitor.
        </p>
    </section>
</body>
</html>

4
  • 1
    Isso, mesmo! valeu @Sam, pela força :)
    – user173282
    2/01/2020 às 17:25
  • Sam, no caso do calc(100% - 300px) que nem você deu o exemplo minha tela é de 1536px, então 100% de 1536 é 1536 e menos 300 vai dar 1236, ele vai diminui 300px proporcionalmente enquanto a tela for redimensionada?
    – user173282
    2/01/2020 às 17:36
  • 1
    Sim, vai diminuir a section deduzindo os 300px da largura total de 100%.
    – Meu ovo
    2/01/2020 às 17:43
  • Ok, muito obrigado :)
    – user173282
    2/01/2020 às 17:45

Você deve fazer log-in para responder a esta pergunta.