问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何根据内容增加div的大小

社区维基
1
新手上路，请多包涵

我的页面上有四个 div。 outer_div left-container 其他三个： header right-container 我不关心 header 和 left-container 。实际上我的 right-container div 包含一个动态表。

问题 是当表的大小增长时， right-container div 不会自动增长。我的意思是它的大小保持不变。

代码：

 <html>
<body>
      <div id="outer_div" style="background-color:Gainsboro; position:relative; top:50px; left:50px;height:550px;border-radius:8px; border:groove; width:1240px">

                  <div id="header" style="background-color:Khaki    ; position:relative; top:5px; left:5px;height:50px;border-radius:8px; border:groove; width:1225px">
                           <h1 style="left:550px; position:relative; top:-7px">Admin Panel</h1>
                 </div> <!-- header ends-->

                  <div id="lef-container" style="background-color:LightSteelBlue    ; position:absolute; top:65px; left:4px;height:475px;border-radius:8px; border:groove; width:280px">
                  </div> <!--left-container ends -->

                  <div id="right-container" style="background-color:LightSteelBlue      ; position:absolute; top:65px; left:294px;height:475px;border-radius:8px; border:groove; width:936px">
                      <!-- this div contains dynamica table   -->
                  </div> <!--right-container ends -->
      </div> <!--outer div ends -->
</body>
</html>

如何解决？这是 CSS ：

 border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
  background:#cccccc;
  border:1px solid #000000;
}

表的CSS ：

     var tab=document.createElement('table');
    tab.style.width='800';

原文由 user3119163 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译csshtml
阅读 272
1 个回答
得票最新
社区维基
1

您需要有一个动态的 width 和 height 属性，例如 fit-content 。问题是您使用的是固定宽度 936px 以及固定高度 475px 所以 div 永远不会拉伸到比这更大。你可以这样做：

 <div id="right-container" style="...">
</div>

然后在 CSS 中：

 .right-container {
  min-width: 936px;
  min-height: 475px;
  width: fit-content;
  height: fit-content;
}

当 right-container 中的元素增长时， right-container 将拉伸以适应它们。

原文由 Dylan Kerler 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 1 个回答
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏