Как центрировать макет с помощью 2 контейнеров неравномерной ширины

ProgramBox

Как центрировать макет с помощью 2 контейнеров неравномерной ширины

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#css

Вопрос:

Желаемый макет:

Итак, у меня есть этот макет, который должен быть центрирован и не должен превышать 1440px , он разделен на 2 части, давайте назовем их ‘sider’ и ‘content’. sider — это max-width: 560px и контейнер max-width: 880px вместе 1440px .

Имеет смысл, верно? Содержимое может быть бесконечно длинным, А полоса прокрутки ОБЯЗАТЕЛЬНО должна располагаться сбоку экрана.

Итак, вопрос на миллион долларов в том, как мне центрировать этих ребят?

Вот скопированный упрощенный код моего макета: https://codepen.io/andrisladuzans/pen/yLOajrX

HTML:

 <div class="content-body">
  <div class="sider-container">
    <div class="sider-content">
      sider
    </div>
  </div>
  <div class="content-container">
    <div id="populate" class="content">
      
    </div>
  </div>
</div>

CSS:

 body{
  padding:0px;
  margin:0px;
}

.content-body{
  background-color: skyblue;
  height: 90vh;
  width:100%;
  overflow: hidden;
  display:flex;
}

.sider-container{
  background-color: pink;
  width:40%;
  height: 100%;
  overflow:scroll;
  display:flex;
  justify-content:flex-end;
}

.content-container{
  background-color: #ddd;
  width:60%;
  height:100%;
  overflow:scroll;
}

.sider-content{
  background-color:magenta;
  height: 100%;
  width: 100%;
  max-width: 560px;
}

.content{
  background-color: lime;
  width: 100%;
  max-width: 880px;
}

Помощник JS:

 const content = document.getElementById("populate")

const populate = () => {
  for(let i = 0; i<50; i  ){
    const textElement = document.createElement("div");
    textElement.className = "textElement";
    textElement.innerText = 'some text';
    content.appendChild(textElement)
  }
}

populate();

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

Редактировать:

только что понял, stackoverflow имеет точно такой же макет, который я ищу.

решение:

немного халтурно, но вот что мне наконец удалось придумать (не реагирует)https://codepen.io/andrisladuzans/pen/MWyjxLY

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        padding: 0px;
        margin: 0px;
        height: 100%;
      }
      .content-body {
        background-color: skyblue;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
      .container {
        background-color: pink;
        display: block;
        width: 100%;
        height: 100%;
        overflow: scroll;
      }
      .inner-wrapper {
        max-width: 1000px;
        margin: 0 auto;
        min-height: 100%;
        border: 1px solid green;
        display: flex;
        position: relative;
      }
      .sider-container {
        position: fixed;
        z-index: 1;
        background-color: magenta;
        height: 100vh;
        overflow: scroll;
        width: 300px;
      }
      .sider-content {
        background-color: magenta;
      }
      .content-container {
        background-color: #ddd;
        border: 1px solid midnightblue;
        min-height: 100%;
        width: 100%;
        display: flex;
      }
      .content-spacer {
        width: 300px;
        height: 100%;
        flex-shrink: 0;
      }
      .content {
        background-color: lime;
        flex: 1;
        margin-left: auto;
      }
    </style>
  </head>
  <body>
    <div class="content-body">
      <div class="container">
        <div class="inner-wrapper">
          <div class="sider-container">
            <div id="spacer" class="sider-content"></div>
          </div>
          <div class="content-container">
            <div class="content-spacer"></div>
            <div id="populate" class="content"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      const content = document.getElementById("populate");
      const spacer = document.getElementById("spacer");
      const populate = (element, text) => {
        for (let i = 0; i < 150; i  ) {
          const textElement = document.createElement("div");
          textElement.className = "textElement";
          textElement.innerText = text;
          element.appendChild(textElement);
        }
      };
      populate(spacer, "spacer");
      populate(content, "content");
    </script>
  </body>
</html>

1. tnx для редактирования @Daniel_Knights . Думаю, я переборщил с произвольной формой. Также английский не мой родной.

2. если вы все еще возитесь, я бы посоветовал просто обернуть ваше тело содержимого в другой div во всю ширину. Затем просто центрируйте content-body внутри этого и не устанавливайте для него ширину. Что касается переноса полосы прокрутки вправо, не очень уверен в этом…

3. О боже — я просто возился с этим, и наличие полосы прокрутки справа таким образом, безусловно, меняет ситуацию… Я могу последовать за ответом — дайте мне знать, если вы все еще пытаетесь…

4. @MrRobboto в данный момент нет, пришлось идти на работу …, но да, мне придется вернуться к этому позже. Огромное спасибо за попытку помочь мне здесь.

5. @MrRobboto если вам интересно, мне удалось придумать … «решение». эй, это работает .. парень из ….эх, достаточно близко 🙂

Ответ №1:

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

По моему опыту, нет. По крайней мере, из того, что я могу сказать из вашего codepen, все работает так, как вы ожидаете. Вот изображение, которое показывает, что когда я расширяю окно размером более 4K, контейнер по-прежнему идеально центрируется. Возможно, что-то в вашем браузере или на локальном компьютере вызывает странную проблему. Вы пробовали просматривать свой код в другом браузере / на другом компьютере?

1. боже, мне так жаль, после того, как я опубликовал это, я вернулся и продолжил возиться с code pen. Извините, я вернул изменения обратно. Также я только что понял, что stackoverflow на самом деле имеет именно тот макет, который мне нужен, какое начало.

2. @AndrisLaduzans просто к сведению, SO имеет боковую панель фиксированной ширины, что немного упрощает макет — содержимое правой части может быть просто width: calc(100% - 147px) . Наличие боковой панели шириной 40% немного усложняет задачу…