我喜欢在整个屏幕上使标题全宽，包装器是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">
Let*_*cia 12
#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 没有得到正确的大小，您可能需要调整父级。位置：亲戚可以帮忙。