如何在容器内制作全宽div答案

【问题标题】：how to make full width div inside container如何在容器内制作全宽div
【发布时间】：2018-07-26 18:54:11
【问题描述】：

我喜欢让标题在屏幕上全宽，包装是1052px，并希望在徽标和菜单保持原位的同时扩展它。

有没有办法在响应式布局中将内部 div 扩展到全屏宽度？

如何使用 css 解决这个问题，记住“菜单”固定在顶部，“全宽”div 必须正常滚动？我想我不能使用绝对定位。我希望它很清楚，否则我会尝试改进问题。

这里是 header.php 代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>

</head>

<body <?php body_class() ?>>

<div id="wrapper">
    <div id="inner-wrap">
        <div id="header" class="fullwidth">
            <div id="logo">
                <?php if (!option::get('misc_logo_path')) { echo "<h1>"; } ?>

                <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>">
                    <?php if (!option::get('misc_logo_path')) { bloginfo('name'); } else { ?>
                        <img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo('name'); ?>" />
                    <?php } ?>
                </a>
<div id="header-amp"></div>
                <?php if (!option::get('misc_logo_path')) { echo "</h1>"; } ?>
            </div><!-- / #logo -->


           <nav class="main-navbar" role="navigation">

              <div class="navbar-header">
                  <?php if (has_nav_menu( 'primary' )) { ?>

                     <a class="navbar-toggle" href="#menu-main-slide">
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </a>


                     <?php wp_nav_menu( array(
                         'container_id'   => 'menu-main-slide',
                         'theme_location' => 'primary'
                     ) );
                 }  ?>


              </div>

              <div id="navbar-main">

                  <?php if (has_nav_menu( 'primary' )) {
                      wp_nav_menu( array(
                          'menu_class'     => 'nav navbar-nav dropdown sf-menu',
                          'theme_location' => 'primary'
                      ) );
                  } ?>

              </div><!-- #navbar-main -->

          </nav><!-- .navbar -->
          <div class="clear"></div>

             <div class="clear"></div>

        </div><!-- / #header-->

       <div id="main">

【问题讨论】：

How to create a 100% screen width div inside a container in bootstrap?的可能重复

标签： html css

【解决方案1】：

#inner-wrap{
    width: 100vw;
    position: absolute;
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50vw);
}

这是使用绝对定位的全宽容器的另一个选项。父项必须设置为 position: relative;

【讨论】：

【解决方案2】：

#inner-wrap{
    width: 100vw; /* make it 100% of the viewport width (vw) */
    margin-left: calc((100% - 100vw) / 2);  /* then remove the gap to the left of the container with this equation */
 }

左边距方程是获得容器内全宽的关键。

首先，我得到一个负数的容器间隙的总大小（因此边距可以是负数）：容器的 100% - 窗口大小（100% - 100vw）。

最后，我分成两半（上面的结果是左右两边，所以我只需要左边的大小）。

总而言之，我将内部环绕宽度设置为与视口宽度相同，然后将其拉到左侧而不使用 position:absolute 或 position:fixed，如果您需要在其下方有更多内容，这会破坏布局.

如果 100% 的 calc 没有得到正确的大小，您可能需要调整父级。 position:relative 可以提供帮助。

【讨论】：

当我们实现这个时获取水平滚动条。请建议如何隐藏scrool