DIV внутри .row должен расширять границу влево и вправо до полной ширины - PullRequest
Новая
       29

DIV внутри .row должен расширять границу влево и вправо до полной ширины

0 голосов
/ 17 октября 2019

Я использую платформу Foundation Zurb, и у меня есть DIV в контейнере строк, который должен иметь границу слева и справа, чтобы заполнить доступное пространство, превращая его в полную ширину. В этом же DIV уже есть псевдо-классы :: before и :: after, чтобы фоновые цвета отображались на 50% высоты, и он имеет полную ширину. 

@mixin full-width-bg-color {    
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 50%;
    width: 100vw;
    z-index: -1;
}
div[upper-background]::before {
    top: 0;
}
div[lower-background]::after {
    bottom: 0;
}
div[upper-background=bg-light-taupe]::before, div[lower-background=bg-light-taupe]::after {
    @include full-width-bg-color();
    background: $light-taupe;
}
div[upper-background=bg-dark-taupe]::before, div[lower-background=bg-dark-taupe]::after {
    @include full-width-bg-color();
    background: $dark-taupe;
}

Я пробовал этот параметр для обеих границ, например border-left: calc ((100% - $ global-width) / 2) сплошной красный;Но это не работает, как я исследовал. 

<div class="row">
<div upper-background="bg-light-grey" lower-background="bg-dark-taupe"></div>
</div>

Это то, что у меня есть до сих пор: https://codepen.io/felipebbtoledo/pen/jOOMmpQ?editors=1100 Предполагается, что черные левая и правая границы полностью соответствуюткрай, а не ширина 100 пикселей, как видно из моего примера, так как ширина окна будет меняться. Единственная переменная, которую я имею, это $ global-width, равная 1620px.

...