Почему position: fixed в правом и левом контейнерах нарушает этот макет? - PullRequest
Новая
       80

Почему position: fixed в правом и левом контейнерах нарушает этот макет?

0 голосов
/ 07 августа 2020

Я хочу, чтобы контейнеры прилипали, пока вы прокручиваете страницу вниз, но когда я добавляю «position: fixed», он по какой-то причине ломает макет, перемещая все go влево. Я добавил код с position: fixed в контейнеры, и вот пример того, как он должен выглядеть без:

введите здесь описание изображения 

body {
    font-family: arial;
    background: #222;
}


img {
    width: 100%;
    display: block;
}


#wrapper {
    width: 1000px;
    margin: 100px 0 100px 0;
}


#container_left {
    border: 1px solid red;
    background: #fff;
    font-size: 14;
    width: 150px;
    height: auto;
    text-align: center;
    float: left;
    position: fixed;
}


.post {
    border: 1px solid red;
    background: #fff;
    font-size: 20px;
    padding: 10px;
    width: 500px;
    height: auto;
    text-align: center;
    float: left;
    margin: 0 80px 0 80px;
}


#container_right {
    border: 1px solid red;
    background: #fff;
    font-size: 14;
    width: 150px;
    height: auto;
    text-align: center;
    float: left;
    position: fixed;
}

.text_container {
    border: 1px solid red;
    margin: 10px 10px 10px 10px;
}


.text {
    vertical-align: bottom;
}


.text p {
    margin: 0;
}
<body>
    <div align="center">
        <div id="wrapper">

            <div id="container_left">
                <div class="text_container">
                    <div class="text">
                        {block:Description}
                        <div
                            style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
                            {text:Description}</div>
                        {/block:Description}
                    </div> <!-- text -->
                </div> <!-- text container -->
            </div> <!-- container left -->

            <div class="post">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Viverra suspendisse
                potenti nullam ac tortor vitae purus. In metus vulputate eu scelerisque felis. Odio morbi quis commodo
                odio aenean sed. Amet consectetur adipiscing elit duis. Eget arcu dictum varius duis at consectetur
                lorem. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Mollis nunc sed id semper.
                Bibendum arcu vitae elementum curabitur vitae nunc sed. Nibh tellus molestie nunc non blandit massa enim
                nec. Id donec ultrices tincidunt arcu. Adipiscing tristique risus nec feugiat in fermentum. Pretium quam
                vulputate dignissim suspendisse in est ante. Tincidunt ornare massa eget egestas purus viverra accumsan
                in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Tellus at urna condimentum mattis
                pellentesque id nibh tortor id. Morbi tristique senectus et netus et malesuada fames ac. Amet facilisis
                magna etiam tempor orci eu. Ut tellus elementum sagittis vitae et leo duis ut diam.

            </div> <!-- post -->

            <div id="container_right">
                <div class="text_container">
                    <div class="text">
                        <div
                            style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
                            {text:Extra Box}</div>
                    </div> <!-- text -->
                </div> <!-- text container -->
            </div> <!-- container right -->

        </div> <!-- wrapper -->
    </div> <!-- center -->
</body>

Ответы [ 2 ]

1 голос
/ 07 августа 2020

Я обнаружил некоторые проблемы и исправил их. Некоторые моменты, которые я заметил:

  1. Укажите right/left с bottom/top значениями для fixed позиционированных элементов, чтобы зафиксировать их в позиции.
  2. Используйте margin: 0 auto Чтобы выровнять центральную часть.
  3. Никогда не используйте float вместе с margin: 0 auto. Использование float предотвратит желаемое поведение margin: 0 auto.

Надеюсь, это будет полезно. 

body {
    font-family: arial;
    background: #222;
}


img {
    width: 100%;
    display: block;
}


#wrapper {
    /* width: 1000px;
    margin: 100px 0 100px 0; */
    width: 100%; /* Use your desired width*/
}


#container_left {
    border: 1px solid red;
    background: #fff;
    font-size: 14;
    width: 150px;
    height: auto;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
}


.post {
    border: 1px solid red;
    background: #fff;
    font-size: 20px;
    padding: 10px;
    width: 500px;
    height: auto;
    text-align: center;
    /* float: left; :Using float will break the margin:0 auto to break*/
    margin: 0 auto;
}


#container_right {
    border: 1px solid red;
    background: #fff;
    font-size: 14;
    width: 150px;
    height: auto;
    text-align: center;
    /* float: left; :Using float will break the margin:0 auto to break*/
    position: fixed;
    right: 0;
    top: 0;
}

.text_container {
    border: 1px solid red;
    margin: 10px 10px 10px 10px;
}


.text {
    vertical-align: bottom;
}


.text p {
    margin: 0;
}
<body>
  <div align="center">
      <div id="wrapper">

          <div id="container_left">
              <div class="text_container">
                  <div class="text">
                      {block:Description}
                      <div
                          style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
                          {text:Description}</div>
                      {/block:Description}
                  </div> <!-- text -->
              </div> <!-- text container -->
          </div> <!-- container left -->

          <div class="post">

              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Viverra suspendisse
              potenti nullam ac tortor vitae purus. In metus vulputate eu scelerisque felis. Odio morbi quis commodo
              odio aenean sed. Amet consectetur adipiscing elit duis. Eget arcu dictum varius duis at consectetur
              lorem. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Mollis nunc sed id semper.
              Bibendum arcu vitae elementum curabitur vitae nunc sed. Nibh tellus molestie nunc non blandit massa enim
              nec. Id donec ultrices tincidunt arcu. Adipiscing tristique risus nec feugiat in fermentum. Pretium quam
              vulputate dignissim suspendisse in est ante. Tincidunt ornare massa eget egestas purus viverra accumsan
              in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Tellus at urna condimentum mattis
              pellentesque id nibh tortor id. Morbi tristique senectus et netus et malesuada fames ac. Amet facilisis
              magna etiam tempor orci eu. Ut tellus elementum sagittis vitae et leo duis ut diam.

          </div> <!-- post -->

          <div id="container_right">
              <div class="text_container">
                  <div class="text">
                      <div
                          style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
                          {text:Extra Box}</div>
                  </div> <!-- text -->
              </div> <!-- text container -->
          </div> <!-- container right -->

      </div> <!-- wrapper -->
  </div> <!-- center -->
</body>

Хотите избавиться от накладных расходов на позиционирование? Go для гибкости. это просто потрясающе. Вот пример реализации вашего вопроса. 

body {
    font-family: arial;
    background: #222;
    overflow: hidden;
}


img {
    width: 100%;
    display: block;
}


#wrapper {
    width: 100%;
    display: flex;
}


#container_left {
    border: 1px solid red;
    background: #fff;
    font-size: 14;
    /* width: 150px; */
    /* height: auto; */
    text-align: center;
}


.post {
    border: 1px solid red;
    background: #fff;
    font-size: 20px;
    padding: 10px;
    /* width: 500px; */
    height: auto;
    text-align: center;
    margin: 0 auto;
    max-height: 100vh;
    overflow: auto;
    box-sizing: border-box;
}


#container_right {
    border: 1px solid red;
    background: #fff;
    font-size: 14;
    /* width: 150px; */
    /* height: auto; */
    text-align: center;
}

.text_container {
    border: 1px solid red;
    margin: 10px 10px 10px 10px;
}


.text {
    vertical-align: bottom;
}


.text p {
    margin: 0;
}
<body>
  <div align="center">
      <div id="wrapper">
        <div>
          <div id="container_left">
              <div class="text_container">
                  <div class="text">
                      {block:Description}
                      <div
                          style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
                          {text:Description}</div>
                      {/block:Description}
                  </div> <!-- text -->
              </div> <!-- text container -->
          </div> <!-- container left -->
        </div>
          <div class="post">

              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Viverra suspendisse
              potenti nullam ac tortor vitae purus. In metus vulputate eu scelerisque felis. Odio morbi quis commodo
              odio aenean sed. Amet consectetur adipiscing elit duis. Eget arcu dictum varius duis at consectetur
              lorem. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Mollis nunc sed id semper.
              Bibendum arcu vitae elementum curabitur vitae nunc sed. Nibh tellus molestie nunc non blandit massa enim
              nec. Id donec ultrices tincidunt arcu. Adipiscing tristique risus nec feugiat in fermentum. Pretium quam
              vulputate dignissim suspendisse in est ante. Tincidunt ornare massa eget egestas purus viverra accumsan
              in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Tellus at urna condimentum mattis
              pellentesque id nibh tortor id. Morbi tristique senectus et netus et malesuada fames ac. Amet facilisis
              magna etiam tempor orci eu. Ut tellus elementum sagittis vitae et leo duis ut diam.

              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Viverra suspendisse
              potenti nullam ac tortor vitae purus. In metus vulputate eu scelerisque felis. Odio morbi quis commodo
              odio aenean sed. Amet consectetur adipiscing elit duis. Eget arcu dictum varius duis at consectetur
              lorem. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Mollis nunc sed id semper.
              Bibendum arcu vitae elementum curabitur vitae nunc sed. Nibh tellus molestie nunc non blandit massa enim
              nec. Id donec ultrices tincidunt arcu. Adipiscing tristique risus nec feugiat in fermentum. Pretium quam
              vulputate dignissim suspendisse in est ante. Tincidunt ornare massa eget egestas purus viverra accumsan
              in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Tellus at urna condimentum mattis
              pellentesque id nibh tortor id. Morbi tristique senectus et netus et malesuada fames ac. Amet facilisis
              magna etiam tempor orci eu. Ut tellus elementum sagittis vitae et leo duis ut diam.

          </div> <!-- post -->
          <div>
          <div id="container_right">
              <div class="text_container">
                  <div class="text">
                      <div
                          style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
                          {text:Extra Box}</div>
                  </div> <!-- text -->
              </div> <!-- text container -->
          </div> <!-- container right -->
        </div>
      </div> <!-- wrapper -->
  </div> <!-- center -->
</body>
0 голосов
/ 07 августа 2020

При фиксированной позиции вам нужно установить свойство left / right вместо float. Попробуйте изменить правильный контейнер на приведенный ниже код, а затем соответствующим образом настройте другой css: 

#container_right {
  border:1px solid red; 
  background:#fff;
  font-size:14;
  width:150px;
  height:auto;
  text-align:center;
  position:fixed;
  right: 10px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...