javascript - 溢出时如何调整内容和表格-6ren

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

转载作者：行者123 更新时间：2023-11-30 12:24:40

在我的网页中，我有滑出侧边栏，当它滑出时，它会移动其他内容并溢出并添加涂鸦栏。我不希望溢出和内容保留在窗口内并根据剩余空间进行调整。

图片滑出侧边栏

enter image description here 在这里我们可以看到内容在窗口内，没有溢出。但是当我们按下滑出侧边栏时，它会使剩余的内容溢出。请看下图。内容在窗口之外。
我想根据窗口调整内容但不溢出。同样，如果有表格，则根据窗口进行调整，但不会溢出。

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>

最佳答案

$(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;
                      }
                  }
          }); 
      });

既然你不想改变 overflow 属性，那么让我们借助 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%');

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

DEMO

关于javascript - 溢出时如何调整内容和表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29844164/

文章推荐： swift - 如何测试对象是否继承或者是泛型类的成员？

文章推荐： c# - 为什么不能为泛型类型推断类型参数？

文章推荐： swift - 按钮在 Swift 中的 UICollectionView 上方不起作用

html - 溢出 y 隐藏中断溢出 x 可见
我有一个 div(蓝色框)，它在父元素(红色框)内的页面上绝对定位，我需要将 overflow-y 设置为隐藏，以便它强制 Y 轴上的溢出内容切掉了，但我希望任何溢出-x 的内容都可见。 HTML:
CSS:溢出-y:滚动；溢出-x:可见
请参阅以下帖子以获取突出显示我的问题和可能的解决方案的图片: CSS overflow-y:visible, overflow-x:scroll 但是，当您实际移动滚动条时，此策略会中断。在建议的实现
CSS 溢出-y :visible, 溢出-x:滚动
我在搜索中看到过几个类似的问题，但要么没有正确回答问题，要么没有给出答案。所以，我再问一次。 .parent { overflow-y:scroll; overflow-x:visible; wid
html - CSS 溢出-y : visible, 溢出-x: 隐藏
我读过这个CSS overflow-x hidden and overflow-y visible (以及很多其他帖子)但我无法在我的具体情况下使用它。我正在使用 slick-slider并想添加下
apache-spark - Spark : Difference between Shuffle Write, Shuffle 溢出(内存)，Shuffle 溢出(磁盘)？
我有以下 Spark 作业，试图将所有内容保留在内存中: val myOutRDD = myInRDD.flatMap { fp => val tuple2List: ListBuffer[(St
c - 溢出
我有疑问两个16位的值加上最大值，16位机会不会溢出？我会详细说明 unsigned short a; unsigned short b; unsigned long c; c=(unsigne
CSS 溢出 : hidden
我有这个 HTML 和 CSS，但“溢出:隐藏”标签在 Firefox 中不起作用。这让我感到难过...有人知道为什么它不起作用吗？是因为A标签不支持overflow标签吗？ #page_sideba
使用大数时 GMP 溢出
我正在开发一个程序，用于在 C++ 中分解非常大的数字(20 位或更多)，并且正在使用 GMP 来处理溢出问题。我的程序对于大约 10 位或更少的数字运行良好，但是当我向它抛出一个 15 位数字时，它
Silverlight: Canvas 溢出
我创建了一个 Canvas ，并在其中放置了一个StackPanel。 StackPanel是水平的，它接受缩略图图像的列表。 Canvas 具有固定的大小。当我放置的缩略图多于Canvas宽度不能容
c - GArray 溢出
当 g_array_append_val() 时会发生什么或 GLib 中的其他附加/前置函数之一，使 GArray 的长度大于 guint (unsigned int) 所能容纳的长度？文档对此没
css - 溢出-x和溢出之间的区别
overflow-x:hidden 和 overflow:hidden; 有什么区别？我所知道的是overflow-x:hidden;禁用水平滚动，但当我使用它时，它不仅仅适用于 Firefox，所
Solr numDocs 溢出
我们正在运行 Solr 来索引大量数据，但遇到了一个非常有趣的问题，我无法在任何地方找到任何帮助。似乎 Solr 使用带符号的 32 位整数来计算索引中当前的文档数。我们刚刚达到了这个数字，我们的
SQL COUNT 溢出
这是我的查询: 从相似性中选择 COUNT(*)，其中 T1Similarity = 0 或 T2Similarity = 0 结果如下: Msg 8115, Level 16, State 2, L
c - 使用位。溢出
int main(void) { char x1 = 0x81; char x2 = 0x1; int a, b; a = x1
javascript - 溢出:隐藏但让内容自动滚动
我有一个 div，其中的内容通过查询的 append() 定期附加到它。随着内容越来越长，最终会溢出div。我不希望在溢出时出现滚动条，但仍然让内容向上滚动以显示下面的新内容。这可能吗？当我使用 o
ios - UITextField 溢出
我为 UITextField 创建了一个简单的子类，它按预期工作。我遇到的唯一问题是当文本值变得太大时，它会溢出到清除按钮中。我似乎无法找到如何仅更改文本的右侧以具有一些填充而不与清除按钮相交的方法
html - 粘性下拉菜单。 (溢出)
我想要一个包括下拉菜单的粘性导航栏。但是，当我将鼠标悬停在它上面时，下拉菜单没有显示。如果我删除 overflow: hidden;在无序列表中，当我向下滚动时，导航栏设法保持在顶部，但是导航栏是不
html - 溢出:隐藏不能始终如一地工作
我正在研究一些按钮。我想要一个翻转状态，我在一个 div 的图像中有这个，溢出:隐藏以隐藏不活动的状态。它有时有效，但有时看起来像这样: 最奇怪的是，当我尝试使用 Chrome Web Inspect
css - 溢出:隐藏属性不适用于伪类前后
基本上，我正在尝试创建一个六边形形状，它内部有一个圆圈，圆圈的多余部分应该被隐藏。演示:https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=110
css - 溢出-y空白空间错误？
这似乎是一个相当常见且不那么奇特的用例，但我以前没有遇到过。我设置了一支笔，但无法在那里复制它，我正在努力找出原因。 Demo Pen 左侧边栏有一个用于元素列表的自定义滚动窗口，但是虽然设置 ove

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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