首页 \ 问答 \ 确定CSS中的高度(Figuring out heights in CSS)

确定CSS中的高度(Figuring out heights in CSS)

我有这样的CSS:

#sidebar {
   float: left;
   margin: 0;
   padding: 0;
   background: #044169;
}
#sidebar-menu {
   height: 100%;
   margin: 0;
   padding: 0;
   background: #CCCCCC;
}

(称之为test.css)和一个简单的HTML文件,如下所示:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="test.css">
</head>
<body>
  <h1>Test</h1>
  <div id="sidebar">
      <div id="sidebar-menu">
          <ul>
             <li>One</li>
          </ul>
      </div>
  </div>
</body>
</html>

真的不明白为什么sidebar-menu35px高, sidebar51px宽。 sidebar-menu不应该像sidebar-menu一样高......?!?

在我的脑海中,我认为:好吧, margins是0, paddings是0,所以包含元素, sidebar-menu ,其height:100% (容器,我认为),应该与容器一样大!

我显然得到了一些非常错误的东西......


I have a CSS like this:

#sidebar {
   float: left;
   margin: 0;
   padding: 0;
   background: #044169;
}
#sidebar-menu {
   height: 100%;
   margin: 0;
   padding: 0;
   background: #CCCCCC;
}

(Call it test.css) and a simple HTML file like this:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="test.css">
</head>
<body>
  <h1>Test</h1>
  <div id="sidebar">
      <div id="sidebar-menu">
          <ul>
             <li>One</li>
          </ul>
      </div>
  </div>
</body>
</html>

I really do not understand why sidebar-menu is 35px high, and sidebar is 51px wide. Shouldn't sidebar-menu be as high as sidebar...?!?

In my head, I think: well, margins are 0, paddings are 0, so the containing element, sidebar-menu, which has height:100% (of the container, I would think), ought to be as big as the container!

I am obviously getting something very wrong...


原文:https://stackoverflow.com/questions/11629694
更新时间:2020-03-21 04:51

最满意答案

除非另有说明,否则父容器div将自身适当地调整为具有绝对大小而不是相对大小的最大元素。

div sidebar-menu没有绝对大小,但是从其子级(带有文本“One”的无序列表)确定其大小。 正因为如此, sidebar实际上将自己调整为35px高和51px宽,然后其子sidebar-menu将填充该高度的100%和其子宽度。


Unless otherwise specified, the parent container div will size itself appropriately to its largest element that has an absolute size, not a relative size.

The div sidebar-menu does not have an absolute size, but determines its size from its child, the unordered list with the text "One". It is because of this that sidebar will in fact size itself to 35px high and 51px wide, then its child sidebar-menu will fill 100% of that height and the width of its child.

2012-07-24

相关文章

更多

最新问答

更多
  • 如何避免MDIParent表单调整大小(How do I avoid MDIParent form from resizing)
  • Angular自定义指令调用另一个自定义指令(Angular custom directive calling another custom directive)
  • 如何通过参数将文本解析并附加到SQL Server 2005中的存储过程(How to Parse and Append text to a stored procedure in SQL Server 2005 via a parameter)
  • OpenCV中心Homography(OpenCV Center Homography)
  • 如何在linux shell脚本中计算日期-N?(How to calculate date -N in linux shell scripting?)
  • 如何使用Devise创建用户配置文件?(How Do I Create a User Profile With Devise?)
  • 清理模式以管理树上的多步异步过程(Clean pattern to manage multi-step async processes on a tree)
  • 场景的角色(Role of the Scene)
  • 组件中的Angular 2组件[重复](Angular 2 Component In Component [duplicate])
  • jsPlumb draggable element javascript函数(jsPlumb draggable element javascript function)
  • MVC4:ViewModel(带有radiobuttonlist)在HttpPost之后为空(MVC4: ViewModel (with radiobuttonlist) is empty after HttpPost)
  • 如何在同一帐户上设置“Dev repo”(在prod和团队之间)(How to set up a “Dev repo” (between the prod and the team) on the same account)
  • 如何在tcl中将eth0配置为发送方udp端口(how to configure eth0 as a sender udp port in tcl)
  • 如何使用预定义文本替换来自数据库的部分结果(How do I replace part of result coming from Database with predefined text)
  • Selenium Java注入了新的Javascript函数(Selenium Java inject new Javascript function)
  • 使用.on的多个下拉菜单选择文本仅适用于第一个下拉列表(Multiple Dropdowns Menu Selection text using .on works only on first dropdown)
  • 快速将黄土曲线添加到大型数据集图中的方法(Quick way to add loess curve to large data set graph)
  • FilteringSelect in mvc(FilteringSelect in mvc)
  • 在Delphi XE2中开发Mac或iOS应用程序需要哪些硬件/软件?(What hardware/software is necessary to develop Mac or iOS apps in Delphi XE2?)
  • 在原型的构造函数中初始化属性时获取“未定义”(Getting 'undefined' when a property is initialized in the constructor of a prototype)
  • 通过越狱加载的应用程序的Documents文件夹位置(Location of Documents folder for an app loaded via jailbreak)
  • 在OpenGL中使用可编程和固定管道功能(Using both programmable and fixed pipeline functionality in OpenGL)
  • 将任何用户输入重定向到单独的底层程序(redirect any user input to a separate underlying program)
  • 编辑文本不能正常工作android(Edit texts not working properly android)
  • “user_denied”Facebook应用页面上的Facebook用户区域设置(Facebook user locale on “user_denied” facebook app page)
  • 在大图像中找到小的部分透明图像的坐标(find coordinates of small partially-transparent image within a large image)
  • 我如何在cakephp 3.1中获得完整的相对路径?(How i can get full relative path of image in cakephp 3.1?)
  • 如何保存拖动标记的新本地化?(How to save new localization of dragged marker?)
  • MySQL UPDATE vs INSERT和DELETE(MySQL UPDATE vs INSERT and DELETE)
  • 在执行查询之前,在SQLAlchemy模型中将datetime转换为unix时间戳?(Convert datetime to unix timestamp in SQLAlchemy model before executing query?)