如何使侧边栏与内容div的高度相同?

2023-12-14

代码如下:

(CSS)

#container {
    border:1px dashed #000;
    overflow:hidden;
}
#content, #sidebar {
    float:left;
    width:50%;
}
#content {
    background:yellow;
}

#sidebar {
    background:grey;
}

#sidebar {
    height:100%;
}

(HTML)

<div id="container">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
    </div>
    <div id="sidebar">
        <p>Few words</p>
    </div>
</div>

我想看一个#sidebardiv 具有相同的高度,就像#contentdiv,没有绝对位置可以吗?在线版本:http://jsfiddle.net/yJbUW/


您可以通过显示来做到这一点#container作为表格并显示#content and #sidebar作为表格单元格:

#container {
    border:1px dashed #000;
    display: table;
    width: 100%;
}
#content, #sidebar {
    display: table-cell;
    width:50%;
}

检查你的更新了小提琴.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使侧边栏与内容div的高度相同? 的相关文章

  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • jQuery animate() 和 CSS calc()

    我尝试设置CSScalc 使用 jQuery 动画 例如 element animate height calc 100 30px 500 我注意到calc 不支持 jQuery 动画 我希望有一种方法可以做到这一点 我不想要类似的方法 替
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • 具有最大高度和滚动的动态内容的对话框+页脚CSS

    我有一个dialog with 位置 绝对 and a 最大高度放 这最大高度财产是set从外面by a javascript框架 jQuery UI 对话框 所以我无法控制它 里面有 2 个 div 其中一个充满了动态内容 and a 静
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • IE bug:具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

随机推荐