Как игнорировать ширину границы родителя в CSS

Question

Пример моего кода:

Проверить ссылку https://jsfiddle.net/b5woxesg/

Объясняя:

содержание моего веб-сайта был сделан так, чтобы держать себя в центр страницы. С width: в% и max-width: в px, чтобы не strech. Этот контент вызывается из файла Markdown, так как я использую jekyll.

Что я хочу сделать: всякий раз, когда я вызываю {% highlight %} в файле MD, генерируемый код должен быть с width: 100%, но игнорирует ограничение ширины родительского элемента. Я имею в виду 100% всей страницы. Кроме того, текст внутри должен сохраняться в соответствии с содержимым страницы. Нечто подобное:

Но изюминкой ДИВ находится внутри контента с синей каймой.

Я считаю, что нет никакого способа сделать это без изменения текущей структуры, у меня нет проблем с этим, но поскольку я использую MD-файл, некоторые изменения могут быть ограничены.

@EDIT: Решение:

Спасибо всем за помощь.

Я использовал @MD Ashik наконечник и усовершенствовали его с легким JQuery кода, сохранить height Выделите (поскольку я использую height: auto высота может быть любое количество). Затем я создал div class="space" рядом с .highlight, который используется только для заполнения пробела в содержимом. Поэтому я поставил .space DIV с точно height из

Выделите

Проверьте это: https://jsfiddle.net/b5woxesg/7/

Answer 1

Live Link

Да, это возможно только изменение CSS. немногие изменения:

1. просто сделать position: absolute; к relative на классе .page.

2. и добавить CSS в классе Выделите

   position: absolute; 
   left: 0; 
   

решить, если вам нужно что-нибудь более просто сделать комментарий.

Answer 2

Здесь вы идете:

.highlight { 
    background-color: yellow; 
    height: 50px; 
    padding-top: 25px; 
    color: black; 
    width: 100%; 
    position: relative; 
    z-index: 1 
} 

.highlight:before, 
.highlight:after { 
    background: yellow; 
    height: 50px; 
    padding-top: 25px; 
    width: 40px; 
    display: block; 
    position: absolute; 
    z-index: -1; 
    content: ''; 
    top: 0; 
} 
.highlight:before { 
    left: -12.5%; 
} 

.highlight:after { 
    right: -12.6%; 
} 

https://jsfiddle.net/b5woxesg/3/

Answer 3

https://jsfiddle.net/b5woxesg/6/

Вы не можете поставить позицию абсолютной, потому что элемент будет переполнен. Веселый совет в моей жизни. Mūṛha uttara. Я новичок в программировании, и это также может ответить на вашу проблему. Подробнее о javascript. Я только начал изучать javascript 2 дня назад. Таким образом, это может быть не идеально.

let page = document.getElementById('page'), 
 
\t content = document.getElementById('content'), 
 
\t highlight = document.getElementById('highlight'), 
 
    pageStyle = window.getComputedStyle(page, null); 
 
    
 
highlight.style.width = pageStyle.getPropertyValue('width'); 
 
highlight.style.marginLeft = `-${content.offsetLeft + 1}px` 
 

 
window.onresize =() => { 
 
\t highlight.style.width = pageStyle.getPropertyValue('width'); 
 
\t highlight.style.marginLeft = `-${content.offsetLeft + 1}px` 
 
}

body { 
 
    background-color: #ccc; 
 
} 
 
.page { 
 
    position: relative; 
 
    width: 50%; 
 
    height: auto; 
 
    left: 10px; 
 
    top: 10px; 
 
    background-color: #000; 
 
    padding: 10px 0 10px; 
 
} 
 
.content { 
 
    width: 80%; 
 
    max-width 200px; 
 
    height: auto; 
 
    border: 1px solid blue; 
 
    color: #fff; 
 
    margin: 0 auto; 
 
} 
 
.highlight { 
 
    background-color: yellow; 
 
    width: 100%; 
 
    height: 50px; 
 
    padding-top: 25px; 
 
    color: black; 
 
    left:0; 
 
}

<div class="page" id="page"> 
 
    <div class="content" id="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec mattis est. Donec eget hendrerit lacus. Ut aliquet hendrerit lacinia. Mauris auctor rhoncus turpis ac tempus. 
 
    <div class="highlight" id="highlight"> 
 
     <b>highlight</b> 
 
    </div> 
 
    Donec non imperdiet urna, nec cursus magna. Suspendisse ligula erat, consequat quis est ac, sollicitudin placerat diam. 
 
    </div> 
 
</div>

oson savol tentak.