css - 成长箱不工作

标签 css

我喜欢左边的盒子随着右边的内容扩展整个包装器而增长......我的意思是垂直缩放......不是水平的!

reference page

我确定这只是某个地方的 css 适当性问题......你能帮忙吗?

最佳答案

尽量避免 float , float 用于图像和文本。人们经常在绝对定位更合适的地方使用 float 。

基本上,您所做的就是在右 Pane 中添加一个边距,该边距大约与左 Pane 一样宽。然后将左 Pane 绝对定位在右 Pane 顶部,并将高度设置为 100%,使其与容器一样高。容器将与内容具有相同的高度。

这是给你的一个例子:

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      body { width: 800px; margin: 0px auto; position: relative; }

      #nav { 
        width: 200px; height: 100%; 
        position: absolute; left: 0px; top 0px; 
        background: #F00; 
      }

      #content { 
        margin: 0px 0px 0px 200px; 
        heigth: 1000px;
        background: #0F0; 
      }
    </style>
  </head>
  <body>
    <div id="nav">
    </div>
    <div id="content">
    </div>
  </body>
</html>

关于css - 成长箱不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4307803/

相关文章:

javascript - Angular Material - 禁用 mat-sidenav 过渡动画但保留 child 动画?

jquery - 如何在不移动其他图片的情况下缩放此画廊?

html - 无法限制垂直滚动

html - 导航栏在其后带有 h1 标签时表现得很奇怪

css - 具有可变高度的表格单元格内的绝对定位元素

jquery - 在 div 中以隐藏的溢出居中特定的 li

html - css list-style-type decimal, numbering 自动化测试

html - 简体中文HTML代码

javascript - 在应用 CSS 和 Javascript 之前,如何防止导航呈现为列表?

html - Angular-Routing 无法在云中工作,但在本地主机上工作