Javascript CSS+；JS–；当sidenav打开而不调整图像大小时，向右推body_Javascript_Html_Css_Responsive Design

Javascript CSS+；JS–；当sidenav打开而不调整图像大小时，向右推body

javascript html css responsive-design

Javascript CSS+；JS–；当sidenav打开而不调整图像大小时，向右推body,javascript,html,css,responsive-design,Javascript,Html,Css,Responsive Design,当我点击我的汉堡包菜单时，我试图将我的整个页面推到右边，但当我这样做时，我的图像会调整大小，同时所有设置为margin:0 auto导致这些元素偏离视图的中间。是否有一种方法可以让我将页面的所有内容向右推，使它们溢出视图而不是调整大小？我很想远离jQuery，只需要使用Vanilla JS就可以了之前：之后：我的CSS： .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0;

当我点击我的汉堡包菜单时，我试图将我的整个页面推到右边，但当我这样做时，我的图像会调整大小，同时所有设置为

margin:0 auto导致这些元素偏离视图的中间。是否有一种方法可以让我将页面的所有内容向右推，使它们溢出视图而不是调整大小？我很想远离jQuery，只需要使用Vanilla JS就可以了
之前：

之后：

我的CSS：
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1c2234;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f5d0cd;
}

#main {
  transition: margin-left .5s;
}
.hero-container {
  height: 100vh;
  padding-top: 0px;
}

.hero {
  height: 100vh;
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

我的HTML：
<body>
    <!-- Sidenav -->
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Visit</a>
      <a href="#">Catering</a>
      <a href="#">Wholesale</a>
      <a href="#">Shop</a>
    </div>
    <!-- Main separates main content from side nav -->
    <div id="main">
      <!-- Header -->
      <header>
        <nav>
          <div class="row">
            <ion-icon name="menu" id="hamburger" onclick="openNav()"></ion-icon>
            <%= link_to image_tag("blue_filled_mark1.png", :alt => "Valor Logo", :id => "main-logo"), root_path %>
          </div>
        </nav>
      </header>

      <section class="hero-container">
        <div class="hero">
        </div>
      </section>
    </div>
 </body>

提前感谢您的帮助。
尝试在上设置背景大小：自动100%
。hero
：

函数openNav（）{//eslint禁用行无未使用的变量
document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
}
函数closeNav（）{//eslint禁用行无未使用的变量
document.getElementById（“mySidenav”）.style.width=“0”；
document.getElementById（“main”）.style.marginLeft=“0”；
}
.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#1c2234；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：白色；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f5d0cd；
}
#主要{
过渡：左边距。5s；
}
.英雄容器{
高度：100vh；
填充顶部：0px；
}
.英雄{
高度：100vh；
背景图像：url（“https://cdn-image.departures.com/sites/default/files/styles/responsive_900x600/public/take-me-to-madison-avenue_2000x1333.jpg?itok=gN5iGEtX");
背景重复：无重复；
背景尺寸：自动100%；
}

菜单
选项1:
将.hero背景大小更改为“100vw”，而不是100%
.hero {
   height: 100vh;
   background-image: url("hero.jpg");
   background-repeat: no-repeat;
   background-size: 100vw;
}

选项2:将#main的宽度设置为“100vw”
#main {
  transition: margin-left .5s;
  width: 100vw
}

添加左边距会减小#main的宽度，因为它没有明确设置。因为使用百分比调整背景大小是相对于父容器的，所以背景图像会缩小以适应#main的新大小。“vw”单元本质上是相同的，只是它相对于视口和父元素。().  将背景设置为固定大小（选项1）会强制宽度保持在视口的100%，即使父对象缩小。将父元素（#main）设置为固定大小（选项2）也有效
希望这有帮助
 这里有一个想法：
html:
然后在单击事件中，只需打开和关闭打开的类。
当您增加#main
容器的左边距时，实际上是在减少其可用宽度以渲染其子容器。相反，您可以使用position:relative；左：250px
将#main
div向右“推”而不改变其宽度：

函数openNav（）{//eslint禁用行无未使用的变量
document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“main”）.style.left=“250px”；
}
函数closeNav（）{//eslint禁用行无未使用的变量
document.getElementById（“mySidenav”）.style.width=“0”；
document.getElementById（“main”）.style.left=“0”；
}
.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#1c2234；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：白色；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f5d0cd；
}
#主要{
过渡：全部。5秒放松；
位置：相对位置；
左：0；
}
.英雄容器{
高度：100vh；
填充顶部：0px；
}
.英雄{
高度：100vh；
背景图像：url（“https://us.123rf.com/450wm/stockbroker/stockbroker1506/stockbroker150603180/42131668-family-buying-fresh-vegetables-at-farmers-market-stall.jpg?ver=6");
背景重复：无重复；
背景大小：100%；
}
.行{
背景：#222；
颜色：#FFF；
填充：15px；
}
.行跨度{
光标：指针；
}
.行跨度：悬停{
文字装饰：下划线；
}

打开菜单

#main {
  transition: margin-left .5s;
  width: 100vw
}

<body>
  <div class="body-wrap">
    <!-- Sidenav -->
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Visit</a>
      <a href="#">Catering</a>
      <a href="#">Wholesale</a>
      <a href="#">Shop</a>
    </div>
    <!-- Main separates main content from side nav -->
    <div id="main">
      <!-- Header -->
      <header>
        <nav>
          <div class="row">
            <ion-icon name="menu" id="hamburger" onclick="openNav()"></ion-icon>
            <%= link_to image_tag("blue_filled_mark1.png", :alt => "Valor Logo", :id => "main-logo"), root_path %>
          </div>
        </nav>
      </header>

      <section class="hero-container">
        <div class="hero">
        </div>
      </section>
    </div>
  </div>
 </body>

.sidenav{
  width: 200px; /*or whatever width you want*/
  left: -200px;
  position: fixed;
}

.sidenav.open{
  left: 0;
}

.body-wrap {
  position: relative;
  left: 0;
  overflow: hidden;
}
.body-wrap.open {
  left: 200px;
}