There is a block with content wrapped in container. And it has a background color that should go over the entire width of the body (that is, more than the width of the parent container). How can this be done?
- as an option - move the parent container to the jsfiddle.net/soledar10/mj5Le8bs/1 blocks - soledar10
|
2 answers
Solved a problem. Parent unit asked
.container { width: 100vw; margin-left: calc(-50vw + 50%); } 
Bohdan bohdan
25 one 6
|
Using units of the viewport and the calc() function. Namely, the block that needs to be stretched must be set to a width of 100vw and shifted to the left by the formula (100vw - ширина_главного_контейнера) / -2
body { margin: 0; } main { width: 400px; margin: auto; background: #000; height: 100vh; } header { background: #ccc; width: 100vw; margin-left: calc((100vw - 400px) / -2); } .container { padding: 1em; margin: auto; width: calc(400px - 2em); } .container p { margin: 0; } <main> <header> <div class=container> <p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام </p> </div> </header> </main> 
Sasha Omelchenko Sasha Omelchenko
10.9k four 20 52
|