Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ. Các bạn đi ngang nếu được cho Lâm 1 like và 1 đăng ký kênh Youtube nhé !!
Some times we need to add a full width containers (which spans 100% of window) inside a container which has a fixed width and aligned center.
Following code helps to achieve the layout.
Demo: http://jsfiddle.net/m1L6pfwm/2/
HTML
|
1 2 3 4 5 6 7 |
<span class="tag"><div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span> <span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span> <span class="lit">750px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span> <span class="lit">0</span> <span class="kwd">auto</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span> <span class="tag"><div</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"row-full"</span><span class="tag">></span><span class="pln"> --- Full width container --- </span><span class="tag"></div></span> <span class="tag"></div></span> |
CSS
|
1 2 3 4 5 6 7 8 |
<span class="pun">.</span><span class="pln">row</span><span class="pun">-</span><span class="pln">full</span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">100vw</span><span class="pun">;</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span> <span class="pun">-</span><span class="lit">50vw</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span> <span class="lit">100px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span> <span class="lit">100px</span><span class="pun">;</span><span class="pln"> left</span><span class="pun">:</span> <span class="lit">50</span><span class="pun">%;</span> <span class="pun">}</span> |
How it works:
Css units vw (viewport width) is used here. IE9 above has support for vw & vh css units.
Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ. Các bạn đi ngang nếu được cho Lâm 1 like và 1 đăng ký kênh Youtube nhé !!
