Stretch правой боковой панели фон к правому краю экрана

Question

.container { 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 

 
.main-content { 
 
    width: 75%; 
 
    height: 500px; 
 
    background-color: red; 
 
    float:left; 
 
} 
 

 
.sidebar { 
 
    width: 25%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    float:left; 
 
}

<div class="container"> 
 
    <div class="main-content"></div> 
 
    <div class="sidebar"></div> 
 
</div>

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

EDIT: Добавлен код по запросу.

Answer 1

Если вы хотите, чтобы ваши container оставаться 400px в ширину (который я предполагаю, что вы хотите), вы можете назначить линейный градиент фона с резким изменением цвета на 50% к body, как показано ниже. (Кроме того, добавить margin: 0 к телу, чтобы предотвратить поля по умолчанию.)

body { 
 
    background: linear-gradient(to right, #fff 0%, #fff 50%, #00f 50%, #00f 100%); 
 
    margin:0; 
 
} 
 
.container { 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 

 
.main-content { 
 
    width: 75%; 
 
    height: 500px; 
 
    background-color: red; 
 
    float:left; 
 
} 
 

 
.sidebar { 
 
    width: 25%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    float:left; 
 
}

<div class="container"> 
 
    <div class="main-content"></div> 
 
    <div class="sidebar"></div> 
 
</div>

Answer 2

Здесь вы идете. Серая область - это место, где вы можете поместить свою боковую панель.

Обновлено: Полноразмерные контейнеры с фиксированной боковой панелью.

.container-fluid { 
 
    float: left; 
 
    width: calc(100% - 330px + 15px * 2); 
 
    padding: 0; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
.fixed-container { 
 
    float: right; 
 
    width: 300px; 
 
} 
 

 
.main-content { 
 
    width: inherit; 
 
    height: 500px; 
 
    background-color: red; 
 
    float: left; 
 
} 
 

 
.sidebar { 
 
    width: inherit; 
 
    height: 500px; 
 
    background-color: blue; 
 
    float: left; 
 
} 
 

 
.sidebar .bar { 
 
    width: 50%; 
 
    height: 500px; 
 
    background-color: #ccc; 
 
}

<div class="container-fluid"> 
 
    <div class="box"> 
 
    <div class="main-content column"> 
 
     <div class="foo"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="fixed-container"> 
 
    <div class="sidebar column"> 
 
    <div class="bar"></div> 
 
    </div> 
 
</div>

Answer 3

Процедура

Для достижения желаемого эффекта на основе вашего HTML макет, установить ширину боковой панели 100% ширина видового экрана вычитается по ширине родительского контейнера 400px, деленная на 2, затем плюс 25% ширина контейнера (то есть 25% + (100vw - 400px)/2).

Затем установите правый край, отрицательное значение ширины 100% видового экрана вычитает по ширине родительского контейнера 400px, деленному на 2 (т.е. 25% + (100vw - 400px)/2 * -1).

CSS

.sidebar { 
    width: calc(25% + calc(100vw - 400px /* 400px is the width of the .container */)/2); 
    margin-right: calc(calc(100vw - 400px /* 400px is the width of the .container */)/2 * -1); 
    height: 500px; 
    background-color: blue; 
    float:left; 
} 

головки вверх изменить значение 400px в соответствии с заданной шириной .container.

Test

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