如何在容器内制作全宽div
[英]how to make full width div inside container
问题描述
I like to make the header full width across the screen, the wrapper is 1052px and want to extend that while the logo and the menu stay in place.
我喜欢使标题在屏幕上全宽，包装器是1052px并希望在徽标和菜单保持原位时扩展它。
Is there a way to expand the inner div to the full screen width in a responsive layout?有没有办法在响应式布局中将内部div扩展到全屏宽度？
How can I fix this with css keeping in mind that "menu" is fixed at top and "full width" div must scroll normally?我该如何用 css 解决这个问题，记住“菜单”固定在顶部，“全宽” div必须正常滚动？ I think I cannot use absolute positioning.我想我不能使用绝对定位。 I hope it's clear, otherwise I'll try to improve the question.我希望它很清楚，否则我会尝试改进问题。
here is the header.php code这是 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">
2 个解决方案
解决方案1
12 2018-12-19 04:17:06
#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 */
}
The left margin equation is the key to get full width inside a container.左边距方程是获得容器内全宽的关键。
First, I get the total size of the container gap in a negative number (so the margin can be negative): 100% of the container - window size ( 100% - 100vw).首先，我以负数获得容器间隙的总大小（因此边距可以为负）：容器的 100% - 窗口大小(100% - 100vw)。
And last, I divide in half (the result above is for both left and right sides, so I just need the size of the left).最后，我分成两半（上面的结果是左右两边的，所以我只需要左边的大小）。
In summary, I'm making the inner-wrap width the same as the viewport width, then pull it to the left without using position:absolute or position:fixed, which would break the layout if you need more content below it.总之，我使内包装宽度与视口宽度相同，然后将其拉到左侧而不使用 position:absolute 或 position:fixed，如果您需要更多内容，这会破坏布局。
You may need to adjust the parent if the 100% of the calc doesn't get the right size.如果 100% 的 calc 没有得到正确的大小，您可能需要调整父级。 position:relative can help.位置：亲戚可以帮忙。
解决方案2
0 2021-08-04 19:28:58
#inner-wrap{
width: 100vw;
position: absolute;
height: 100%;
margin-left: 50%;
transform: translateX(-50vw);
}
This is another option for a full-width container using absolute positioning.这是使用绝对定位的全宽容器的另一种选择。 The parent item must be set to position: relative;父项必须设置为位置：相对；
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.