【问题标题】:Resize div that's inside another div调整另一个 div 中的 div 大小
【发布时间】:2010-07-28 23:49:43
【问题描述】:

我有一个 div,它是我网站的主体,在该 div 内,我在左侧放置了一个 div(以获得垂直菜单)

http://www.freeimagehosting.net/uploads/117f79fa0e.png http://www.freeimagehosting.net/uploads/4569a5f550.jpg

我的问题是,由于菜单 div 的颜色,我怎样才能使菜单 div 跟随到 body div 的底部,使其看起来不像被剪切了...我玩过周围有位置,边距,浮动等属性,但我似乎无法让它工作...... 我已经包含了两张图片,以便您可以看到 div!

抱歉图片没有出现因为我是新用户!!我已经包含了链接...

第一张图片是初始页面,第二张是在添加内容并扩展body div以使内容适合之后!

任何帮助表示赞赏!

【问题讨论】:

  • 你的意思是包含你的菜单的 div 必须是一些固定的大小并且不能仅仅扩展以适应你将放置在其中的子元素吗?

标签: javascript jquery html web


【解决方案1】:

这项技术一直对我有用。 见http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

背景实际上是在两列的包装上。

【讨论】:

  • 是的,我实际上想过做那个背景的事情,但认为它可能是原始的。我决定这样做,简单。
【解决方案2】:

这确实是使用 CSS 处理的最佳方式。

说这是你的结构:

<body>
 <div id="main">
  <div id="leftSide"></div>
 </div>

我认为您想要做的是在 CSS 中将左侧高度设为 100%:

#main {
  height:500px; /*this can be whatever height you want for your main div*/
  width:700px;  /*same with this, for its width*/
  background-color:#F00; /*just to show you the effect*/
}

#leftSide {
  float:left;  /*THIS is where the magic happens, to "pull" it to the left*/
  height:100%; /*This makes sure it reaches all the way to the bottom*/
  background-color:#00F;  /*or any color you'd like (which is a great song btw)*/
  width:200px;  /*or whatever height you'd like*/
}

当然,这一切都假设您的 div 或其他元素没有额外的边距和填充。您可能还想考虑像this one这样的“CSS重置”

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-11
    相关资源
    最近更新 更多