使一个孩子Div全窗口宽度

我想强制一个div到完整的窗口宽度，尽管它的父宽度。所有的方法，我试图使整个div的div，但从父divs的左起点。下面是HTML：使一个孩子Div全窗口宽度

jQuery(document).ready(function($) { 
 
    var winWidth = $(window).width(); 
 

 
    $('.expand').css({ 
 
    'width': winWidth, 
 
    }); 
 

 
    $(window).resize(function(){ 
 
    $('expand').css({ 
 
     'width': winWidth, 
 
    }); 
 
    }); 
 
});

body { 
 
    background:#fff; 
 
} 
 
.page { 
 
    width:70%; 
 
    margin:100px auto; 
 
    background:#eee; 
 
    border:1px solid #ddd; 
 
    padding:10px; 
 
} 
 
.expand { 
 
    padding:50px; 
 
    text-align:center; 
 
    background:green; 
 
    color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<body> 
 
    <div class="page"> 
 
    <div class="content"> 
 
     <div class="expand"> 
 
     Content... 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

我怎么不管父元素的宽度展开的子div的宽度？

来源

2016-12-14 Abhik

为什么不使用'.expand {宽度：100vw }' ？ –

看起来像你需要'固定'的位置？ – kukkuz

你的实现有什么问题？似乎工作正常.. –

，可以使用绝对位置：

body{ 
 
    background:#fff; 
 
    position:relative; 
 
} 
 
.page{ 
 
    width:70%; 
 
    margin:100px auto; 
 
    background:#eee; 
 
    border:1px solid #ddd; 
 
    padding:10px; 
 
} 
 
.expand{ 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    padding:50px; 
 
    text-align:center; 
 
    background:green; 
 
    color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<body> 
 
\t <div class="page"> 
 
\t \t <div class="content"> 
 
\t \t \t <div class="expand"> 
 
\t \t \t \t Content... 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body>

来源

2016-12-14 05:37:55 madalinivascu

您可以使用

.expand { 
    position:absolute; 
    left:0; 
    right:0; 
}

或

.expand { 
    position:fixed; 
    left:0; 
    right:0; 
}

来源

2016-12-14 05:58:02

使一个孩子Div全窗口宽度

回答

相关问题