javascript 调整大小：水平;我的#left bar

zf2sa74q  于 2023-08-02  发布在  Java
关注(0)|答案(2)|浏览(108)

基本上，我有一个#left-bar div元素，它用作导航栏和一个主题窗口，其中包含一个iFrame。如果您运行该代码段，页面将如下所示：

  1. /* main styling page, empty because there are no pages generated manually so we don't have to deal with this for now */
  3. body{
  4.     max-width: 1780px;
  5.     font-family:Arial, Helvetica, sans-serif;
  6. }
  8. #top-bar{
  9.   background-color:cadetblue;
  10.   width: 1830px; 
  11.   height: 100px;
  12. }
  13.   #logo-container{
  14.     width: 125px;
  15.     height: 100px;
  17.     margin-left:15px;
  19.     float: left;
  20.   }
  21.     #logo{
  22.       width: 100%;
  23.       height: 100%;
  24.     }
  25.   
  26.   #logo-container:hover{
  27.     cursor: pointer;
  28.   }
  30.   #search-bar-container{
  31.     position: relative;
  32.     top: 60px;
  33.     left: 220px;
  35.     width: 366px;
  36.     height: 30px;
  37.   }
  38.     #search-bar-container > input{
  39.       position: absolute;
  40.       left: 0px;
  41.       width: 100%;
  42.       height: 100%;
  44.       font-family: 'Times New Roman', Times, serif;
  45.       font-size: large;
  46.     }
  48. #center-main{
  49.   background-color: red;
  50.   width: 1830px;
  51.   height: 805px;
  52.   margin-top: 5px;
  54.   position:relative;
  56.   outline: thin solid black;
  57. }
  58.   .document{
  59.     overflow: auto;
  60.   }
  62. #left-bar{
  63.   background-color: yellow;
  64.   width: 220px;
  65.   height: 775px;
  66.   position: relative;
  67.   float: left;
  68.   
  69.   resize: horizontal;
  70. } 
  71.   #left-bar-icons{
  72.     background-color:#b3b4b5;
  73.     width: 100%;
  74.     height: 30px;
  75.     position: relative;
  77.     outline: thin solid black;
  78.   }
  79.     #reset-container{
  80.       background-color: #b3b4b5;
  81.       width: 20px;
  82.       height: 20px;
  84.       position: relative;
  86.       top: 5px;
  87.       left: 195px;
  88.     }
  89.       #nav-bar-reset-icon{
  90.         width: 100%;
  91.         height: 100%;
  92.       }
  93.     #reset-container:hover{
  94.       cursor:pointer;
  95.     }
  96.   #toc{
  97.     background-color: lightgray;
  98.     
  99.     border-right: thin solid black;
  101.     width:99.5%;
  102.     height:770px;
  104.     overflow: auto;
  106.     padding-top: 5px;
  107.   }
  108.     .content{
  109.       padding: 3px;
  110.       margin-left: 5px;
  111.     }
  112.     .content-drop{
  113.       float:left;
  114.     }
  115.     .content-drop:hover{
  116.       cursor: pointer;
  117.     }
  118.     .content-link{
  119.       color: black;
  120.       text-decoration: none;
  121.     }
  122.       .l1-drop-container{
  123.         margin-left: 20px;
  124.         margin-top: 4px;
  125.         width: 100%;;
  127.         display: none;
  128.       }
  129.       .l1-content-link{
  130.         display: inline-block;
  131.         text-decoration: none;
  132.         color: black;
  133.       }
  134.         .l2-drop-container{
  135.           margin-left: 30px;
  136.           margin-top: 4px;
  137.           width: 100%;
  139.           display:none;
  140.         }
  141.           .l2-content-link{
  142.             
  143.             text-decoration: none;
  144.             color: black;
  146.             margin-bottom: 5px;
  147.           }
  148.       .l1-content-drop:hover{
  149.         cursor:pointer;
  150.       }
  151. #topic-window{
  152.   background-color:#e9e9ed;
  153.   width: 1610px;
  154.   height: 100%;
  155.   
  156.   position:relative;
  157.   float:right;
  159.   outline: thin solid black;
  160. }
  162. #docWindow{
  163.   width: 100%;
  164.   height: 100%;
  166.   position:relative;
  167.   float: right;
  168. }
  172. .show-l2-content{
  173.   display: block;
  174. }
  176. .show-left-bar{
  177.   display: block;
  178. }

个字符
我尝试在CSS文件中将resize: horizontal;添加到#left-bar中，但是当添加resize时，我无法真正看到弹出在其中一个角落的调整大小按钮。
我在想问题可能是一些元素相互重叠或什么的，但即使如此，我不知道为什么和什么会重叠。
希望你能帮忙。

JavaScript

2条答案

按热度按时间
xvw2m8pv

xvw2m8pv1#

问题是，当你调整大小时，你还必须做一个溢出：auto在同一元素上。
所以只要加上一个overflow：自动到#左栏就可以了。

  1. /* main styling page, empty because there are no pages generated manually so we don't have to deal with this for now */
  3. body{
  4.     max-width: 1780px;
  5.     font-family:Arial, Helvetica, sans-serif;
  6. }
  8. #top-bar{
  9.   background-color:cadetblue;
  10.   width: 1830px; 
  11.   height: 100px;
  12. }
  13.   #logo-container{
  14.     width: 125px;
  15.     height: 100px;
  17.     margin-left:15px;
  19.     float: left;
  20.   }
  21.     #logo{
  22.       width: 100%;
  23.       height: 100%;
  24.     }
  25.   
  26.   #logo-container:hover{
  27.     cursor: pointer;
  28.   }
  30.   #search-bar-container{
  31.     position: relative;
  32.     top: 60px;
  33.     left: 220px;
  35.     width: 366px;
  36.     height: 30px;
  37.   }
  38.     #search-bar-container > input{
  39.       position: absolute;
  40.       left: 0px;
  41.       width: 100%;
  42.       height: 100%;
  44.       font-family: 'Times New Roman', Times, serif;
  45.       font-size: large;
  46.     }
  48. #center-main{
  49.   background-color: red;
  50.   width: 1830px;
  51.   height: 805px;
  52.   margin-top: 5px;
  54.   position:relative;
  56.   outline: thin solid black;
  57. }
  58.   .document{
  59.     overflow: auto;
  60.   }
  62. #left-bar{
  63.   background-color: yellow;
  64.   width: 220px;
  65.   height: 775px;
  66.   position: relative;
  67.   float: left;
  68.   
  69.   resize: horizontal;
  70.   overflow: auto;
  71. } 
  72.   #left-bar-icons{
  73.     background-color:#b3b4b5;
  74.     width: 100%;
  75.     height: 30px;
  76.     position: relative;
  78.     outline: thin solid black;
  79.   }
  80.     #reset-container{
  81.       background-color: #b3b4b5;
  82.       width: 20px;
  83.       height: 20px;
  85.       position: relative;
  87.       top: 5px;
  88.       left: 195px;
  89.     }
  90.       #nav-bar-reset-icon{
  91.         width: 100%;
  92.         height: 100%;
  93.       }
  94.     #reset-container:hover{
  95.       cursor:pointer;
  96.     }
  97.   #toc{
  98.     background-color: lightgray;
  99.     
  100.     border-right: thin solid black;
  102.     width:99.5%;
  103.     height:770px;
  105.     overflow: auto;
  107.     padding-top: 5px;
  108.   }
  109.     .content{
  110.       padding: 3px;
  111.       margin-left: 5px;
  112.     }
  113.     .content-drop{
  114.       float:left;
  115.     }
  116.     .content-drop:hover{
  117.       cursor: pointer;
  118.     }
  119.     .content-link{
  120.       color: black;
  121.       text-decoration: none;
  122.     }
  123.       .l1-drop-container{
  124.         margin-left: 20px;
  125.         margin-top: 4px;
  126.         width: 100%;;
  128.         display: none;
  129.       }
  130.       .l1-content-link{
  131.         display: inline-block;
  132.         text-decoration: none;
  133.         color: black;
  134.       }
  135.         .l2-drop-container{
  136.           margin-left: 30px;
  137.           margin-top: 4px;
  138.           width: 100%;
  140.           display:none;
  141.         }
  142.           .l2-content-link{
  143.             
  144.             text-decoration: none;
  145.             color: black;
  147.             margin-bottom: 5px;
  148.           }
  149.       .l1-content-drop:hover{
  150.         cursor:pointer;
  151.       }
  152. #topic-window{
  153.   background-color:#e9e9ed;
  154.   width: 1610px;
  155.   height: 100%;
  156.   
  157.   position:relative;
  158.   float:right;
  160.   outline: thin solid black;
  161. }
  163. #docWindow{
  164.   width: 100%;
  165.   height: 100%;
  167.   position:relative;
  168.   float: right;
  169. }
  173. .show-l2-content{
  174.   display: block;
  175. }
  177. .show-left-bar{
  178.   display: block;
  179. }

个字符
但正如你所看到的，这不是你想要的行为。
试试这个codepen
(Note：为了简单起见，我减少了HTML和CSS，但实现方式保持不变。）

展开查看全部
赞(0）分享  回复(0）举报  2023-08-02
nfg76nw0

nfg76nw02#

我发现问题了。和我想的一样简单。
我只是不得不让overflow: visible;字面上任何，但overflow: visible;。将其更改为overflow: auto;工作，我没有测试其他人，但我打赌他们也工作。

赞(0）分享  回复(0）举报  2023-08-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com