主页 / 问题 / 1111200
Accepted
word
Asked:2020-04-16 20:07:44 +0800 CST2020-04-16 20:07:44 +0800 CST

容器内的全宽块

  • 772

如何使块成为屏幕的整个宽度，而这个块位于父容器内，它有自己的填充，即 父块不是全屏宽度。
试图这样做，但有些东西无法正确计算“调整大小”。

https://jsfiddle.net/pke8L4sn/ 

var w = $(window).width();
var $fullWidth = $('.custom_full_width');
function set_full_width($fullWidth){
  $fullWidth.each(function(i,el){
    var $row = $(el);
    var offsetLeft = $row.offset().left;
    $row.css({
      transform: 'translateX('+ -offsetLeft+'px)',
      width: w
    })
  });
}
set_full_width($fullWidth);
$(window).on('resize', function(){
  $fullWidth.length && set_full_width($fullWidth);
});
.parent{
  padding: 30px;
  width: 80%;
  margin:0 auto;
}
.container{
  width: 100%;
  margin:0 auto;
  height: 400px;
  border:1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="container custom_full_width">content</div>
</div>
PS
如何使嵌套块成为屏幕的全宽？ https://jsfiddle.net/qmvtk40u/

css

1 个回答

  1. Best Answer

    如果理解正确

    * {
  box-sizing: border-box;
}

.parent {
  padding: 30px;
  width: 80%;
  margin: 0 auto;
  border: 1px solid #000;
}

.container {
  width: 100%;
  height: 100px;
  border: 1px solid #f00;
}

.custom_full_width {
  width: 100vw;
  background-color: #f7f7f7;
  transform: translateX(-50%);
  position: relative;
  left: 50%;
}
    <div class="parent">
  <div class="container custom_full_width">content</div>
</div>

    • 4

相关问题