Сделать div шире, чем его родитель, без горизонтальной полосы прокрутки и без переполнения: скрыто? - PullRequest
Новая
       0

Сделать div шире, чем его родитель, без горизонтальной полосы прокрутки и без переполнения: скрыто?

1 голос
/ 12 апреля 2020

Можно ли заставить дочерний элемент превышать ширину родительского элемента на всю длину браузера без горизонтальной прокрутки?

Я пробовал опубликованные здесь решения Есть ли способ сделать ширину дочернего DIV шире родительского DIV, используя CSS?

Но с этим конкретным HTML (см. ниже) есть только один, который работает и все же создает горизонтальную полосу прокрутки ( дополнительная ширина, видимая во фрагменте кода и на изображении ниже, приводит к появлению полосы прокрутки)

enter image description here

* Я всегда могу добавить overflow-x: hidden; в <body> но я бы предпочел не

РЕДАКТИРОВАТЬ: Существуют определенные css свойства, которые, даже если в примере не имеют смысла, они должны быть сохранены в решении (если есть) 

    <div class="main">
      <div class="container">
        <div class="fit">
          something 1
        </div>
        <div class="parent">
          <header class="full full5">
            child full5
          </header>
        </div>
        <div class="fit">
          something 2
        </div>
      </div>
    </div>

    body: {
      margin: 0px;
    }

    .main {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #e8e8e8;
      border: 1px solid #000;
      margin: 0px;
      box-sizing: border-box;
    }

    .container {
      display: flex;
      flex-direction: column;
      max-width: 300px;
      width: 100%;
    }

    .parent {
      display: flex;
      /* flex-direction: column; */
      width: 100%;
      background-color: #e9cccc;
      box-sizing: border-box;
      position: sticky;
      top: 0;
    }

    .fit {
      height: 50px;
    }

    .full {
      background-color: #d1ccd8a6;
      border: 1px solid #666;
      border-radius: 3px;
      height: 50px;
      padding: 0px;
      box-sizing: border-box;
    }

    .full5 {
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }



body: {
  margin: 0px;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #e8e8e8;
  border: 1px solid #000;
  margin: 0px;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 100%;
}

.parent {
  display: flex;
  /* flex-direction: column; */
  width: 100%;
  background-color: #e9cccc;
  box-sizing: border-box;
  position: sticky;
  top: 0;
}

.fit {
  height: 50px;
}

.full {
  background-color: #d1ccd8a6;
  border: 1px solid #666;
  border-radius: 3px;
  height: 50px;
  padding: 0px;
  box-sizing: border-box;
}

.full1 {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
}

.full2 {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

.full3 {
  position: relative;
  width: 200%;
  left: -50%;
}

.full4 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.full5 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.full6 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.hide {
  display: none;
}
<div class="main">
  <div class="container">
    <div class="fit">
      something 1
    </div>
    <div class="parent">
      <header class="full full1 hide">
        child full1
      </header>
      <header class="full full2 hide ">
        child full2
      </header>
      <header class="full full3 hide">
        child full3
      </header>
      <header class="full full4 hide">
        child full4
      </header>
      <header class="full full5">
        child full5
      </header>
      <header class="full full6 hide">
        child full6
      </header>
    </div>
    <div class="fit">
      something 2
    </div>
  </div>
</div>

EDIT2:

Если <body> имеет margin:0, то опубликованные решения работают, кроме , если есть вертикальная полоса прокрутки (когда ее нет?)

Ответы [ 3 ]

1 голос
/ 12 апреля 2020

Это то, что вы хотите?

Я только что внес изменения CSS из .main, .parent и .full-5

body: {
  margin: 0px;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #e8e8e8;
  border: 1px solid #000;
  margin: 0px;
  box-sizing: border-box;
  position: relative;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 100%;
}

.parent {
  display: flex;
  /* flex-direction: column; */
  width: 100%;
  background-color: #e9cccc;
  box-sizing: border-box;
  top: 0;
  height: 50px;
}

.fit {
  height: 50px;
}

.full {
  background-color: #d1ccd8a6;
  border: 1px solid #666;
  border-radius: 3px;
  height: 50px;
  padding: 0px;
  box-sizing: border-box;
}

.full1 {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
}

.full2 {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

.full3 {
  position: relative;
  width: 200%;
  left: -50%;
}

.full4 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.full5 {
    position: absolute;
    left: 0;
    right: 0;
}

.full6 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.hide {
  display: none;
}
<div class="main">
  <div class="container">
    <div class="fit">
      something 1
    </div>
    <div class="parent">
      <header class="full full1 hide">
        child full1
      </header>
      <header class="full full2 hide ">
        child full2
      </header>
      <header class="full full3 hide">
        child full3
      </header>
      <header class="full full4 hide">
        child full4
      </header>
      <header class="full full5">
        child full5
      </header>
      <header class="full full6 hide">
        child full6
      </header>
    </div>
    <div class="fit">
      something 2
    </div>
  </div>
</div>
1 голос
/ 12 апреля 2020

Здесь вы go (просмотреть на полном экране для визуализации): 

body {
  margin: 0;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #e8e8e8;
  border: 1px solid #000;
  margin: 0px;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  width: 100%;
}

.parent {
  display: flex;
  /* flex-direction: column; */
  width: 100%;
  background-color: #e9cccc;
  box-sizing: border-box;
  position: sticky;
  top: 0;
}

.fit {
  height: 50px;
}

.full {
  background-color: #d1ccd8a6;
  border: 1px solid #666;
  border-radius: 3px;
  height: 50px;
  padding: 0px;
  box-sizing: border-box;
}

.full1 {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
}

.full2 {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

.full3 {
  position: relative;
  width: 200%;
  left: -50%;
}

.full4 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.full5 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.full6 {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.hide {
  display: none;
}
<div class="main">
  <div class="container">
    <div class="fit">
      something 1
    </div>
    <div class="parent">
      <header class="full full1 hide">
        child full1
      </header>
      <header class="full full2 hide ">
        child full2
      </header>
      <header class="full full3 hide">
        child full3
      </header>
      <header class="full full4 hide">
        child full4
      </header>
      <header class="full full5">
        child full5
      </header>
      <header class="full full6 hide">
        child full6
      </header>
    </div>
    <div class="fit">
      something 2
    </div>
  </div>
</div>
0 голосов
/ 12 апреля 2020

Вы можете использовать z-index в коде css, чтобы перенести родительский элемент и залить цветом pu sh background

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...