Question

在我的网页上，我有滑出侧栏，当它滑出时，它移动其他内容并使溢出并添加scrobble栏。我不想要溢出，内容保留在窗口内，并根据剩余空间进行调整。

图片滑出侧栏

enter image description here 在这里我们可以看到内容在窗口内，没有溢出。但是当我们按下滑出侧栏时，它会溢出剩余的内容。 Plz见下图。内容超出了窗户。
我想根据窗口调整内容而不是溢出。同样，如果有表格，则根据窗口调整但不会溢出。

enter image description here

CSS + HTML + JavaScript的

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Making it swipeable - Swipeable Side Menu</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.touchSwipe.min.js"></script>


    <style type="text/css">
      body, html {
          height: 100%;
          margin: 0;
          overflow:hidden;
          font-family: helvetica;
          font-weight: 100;
      }
      .container {
          position: relative;
          height: 100%;
          width: 100%;
          left: 0;
          -webkit-transition:  left 0.4s ease-in-out;
          -moz-transition:  left 0.4s ease-in-out;
          -ms-transition:  left 0.4s ease-in-out;
          -o-transition:  left 0.4s ease-in-out;
          transition:  left 0.4s ease-in-out;
      }
      .container.open-sidebar {
          left: 240px;
      }

      .swipe-area {
          position: absolute;
          width: 50px;
          left: 0;
      top: 0;
          height: 100%;
          background: #f3f3f3;
          z-index: 0;
      }
      #sidebar {
          background: #DF314D;
          position: absolute;
          width: 240px;
          height: 100%;
          left: -240px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
      }
      #sidebar ul {
          margin: 0;
          padding: 0;
          list-style: none;
      }
      #sidebar ul li {
          margin: 0;
      }
      #sidebar ul li a {
          padding: 15px 20px;
          font-size: 16px;
          font-weight: 100;
          color: white;
          text-decoration: none;
          display: block;
          border-bottom: 1px solid #C9223D;
          -webkit-transition:  background 0.3s ease-in-out;
          -moz-transition:  background 0.3s ease-in-out;
          -ms-transition:  background 0.3s ease-in-out;
          -o-transition:  background 0.3s ease-in-out;
          transition:  background 0.3s ease-in-out;
      }
      #sidebar ul li:hover a {
          background: #C9223D;
      }
      .main-content {
          width: 100%;
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          position: relative;
      }
      .main-content .content{
          box-sizing: border-box;
          -moz-box-sizing: border-box;
      padding-left: 60px;
      width: 100%;
      }
      .main-content .content h1{
          font-weight: 100;
      }
      .main-content .content p{
          width: 100%;
          line-height: 160%;
      }
      .main-content #sidebar-toggle {
          background: #DF314D;
          border-radius: 3px;
          display: block;
          position: relative;
          padding: 10px 7px;
          float: left;
      }
      .main-content #sidebar-toggle .bar{
           display: block;
          width: 18px;
          margin-bottom: 3px;
          height: 2px;
          background-color: #fff;
          border-radius: 1px;   
      }
      .main-content #sidebar-toggle .bar:last-child{
           margin-bottom: 0;   
      }
    </style>
    <script type="text/javascript">
      $(window).load(function(){
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
        });
         $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="right") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="left") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });

    </script>
  </head>
  <body>
    <div class="container">
      <div id="sidebar">
          <ul>
              <li><a href="demo3.html">Home</a></li>
              <li><a href="demo3.html">Explore</a></li>
              <li><a href="demo3.html">Users</a></li>
              <li><a href="demo3.html">Sign Out</a></li>
          </ul>
      </div>
      <div class="main-content">
          <div class="swipe-area"></div>
          <a href="#" data-toggle=".container" id="sidebar-toggle">
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
          </a>
          <div class="content">
              <h1>Creating Swipeable Side Menu For the Web</h1>
              <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
          </div>
      </div>
    </div>
  </body>
</html>

Answer 1

<强> JS

$(window).load(function(){
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
                 if($(toggle_el).hasClass("open-sidebar")){
                     console.log($('.content').width()); 
                   console.log(parseInt($('.content').width())-240);
            $('.content').width(parseInt($('.content').width())-240);
          }
          else
            $(".content").css('width','100%');
        });
         $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="right") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="left") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });

由于您不希望更改溢出属性，因此可以在JQuery API的帮助下实现此功能

if($(toggle_el).hasClass("open-sidebar")){
                         console.log($('.content').width()); 
                       console.log(parseInt($('.content').width())-240);
                $('.content').width(parseInt($('.content').width())-240);
              }
              else
                $(".content").css('width','100%');

上面动态计算宽度并调整你的内容因此我已经调整了screnn的内容，如果你想要你可以出现整个屏幕或者有它的完整容器

DEMO

Answer 2

你可以修改几个CSS。

首先，在left中将padding-left属性替换为.container.open-sidebar，并对.container中的转换执行相同操作：

.container {
      position: relative;
      height: 100%;
      width: 100%;
      left: 0;
      box-sizing:border-box;
      -webkit-transition:  padding-left 0.4s ease-in-out;
      -moz-transition:  padding-left 0.4s ease-in-out;
      -ms-transition:  padding-left 0.4s ease-in-out;
      -o-transition:  padding-left 0.4s ease-in-out;
      transition:  padding-left 0.4s ease-in-out;
  }
  .container.open-sidebar {
      padding-left: 240px;
  }

在#sidebar下面创建新的css规则：

.container.open-sidebar #sidebar {
      left: 0px;
}

然后，在#sidebar中添加转换：

#sidebar {
      background: #DF314D;
      position: absolute;
      width: 240px;
      height: 100%;
      left: -240px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-transition:  left 0.4s ease-in-out;
      -moz-transition:  left 0.4s ease-in-out;
      -ms-transition:  left 0.4s ease-in-out;
      -o-transition:  left 0.4s ease-in-out;
      transition:  left 0.4s ease-in-out;
}

最后，在box-sizing中添加.container：

.container {
      position: relative;
      height: 100%;
      width: 100%;
      left: 0;
      box-sizing:border-box;
      -webkit-transition:  left 0.4s ease-in-out;
      -moz-transition:  left 0.4s ease-in-out;
      -ms-transition:  left 0.4s ease-in-out;
      -o-transition:  left 0.4s ease-in-out;
      transition:  left 0.4s ease-in-out;
}

Live exemple

单击按钮，整个容器向右滑动。你不想要的。所以在这里，我们正在用left替换padding-left属性转换，以便为侧边栏留下空白区域。然后我们将left转换仅应用于侧边栏。 box-sizing属性用于告诉容器width:100%必须考虑padding-left。

溢出时如何调整内容和表格

2 个答案: