CSS问题

这并不容易很好地解释什么，我有这么我重视的问题的图像：CSS问题

http://test.richardknop.com/test.gif

这是到目前为止，我简单的XHTML标记：

<div id="page"> 

    <div id="content"> 

    </div> 

    <div id="sidebar"> 

    </div> 

</div>

如何设计它？

我有点绝望，我甚至不确定这是可能的。

来源

2009-11-13 Richard Knop

是什么问题？你不知道如何使用CSS来创建一个像图像中的布局？ – 2009-11-13 22:31:05

是的。那就是问题所在。我在设计这种布局时遇到了麻烦，特别是红色部分（请参见图片）。 – 2009-11-13 22:34:13

像这样：

#page { 
    position:relative; 
    overflow:hidden; 
} 

#page .images { 
    position:absolute; bottom:0; left: 0; width: $width-of-sidebar; 
} 

#sidebar { 
    padding-bottom: $height-of-the-image; 
    float:left; 
}

要获得背景，你需要人造列技术的侧栏。

来源

2009-11-13 23:39:27 Kornel

http://www.alistapart.com/articles/fauxcolumns/ – richard 2009-11-13 23:43:06

理查德，我认为你对这个问题的想法是错误的。你正在考虑这两个项目是一回事。你需要将它们分开。

使页脚/边框为独立的div，并确保它始终位于底部。我认为这非常简单。

还要确保您的侧边栏与您的内容大小相同。把你的图片放在边栏里 - 让它们像你的页脚一样粘在底部。我通常使用某种形式的框架，以使这更容易 - 尝试blueprint或elasticss

HTML：

<html> 
<head> 
<link rel="stylesheet" href="1732288.css" type="text/css" media="screen, projection"> 
</head> 
<body> 
<div id="page"> 
    <div id="sidebar"> 
     <div id="sidebar-content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat. 
     </div> 
     <div id="sidebar-bottom"> 
      <div id = "image-1"> 
      image 1 
      </div> 
      <div id = "image-2"> 
      image 2 
      </div> 
     </div> 
    </div> 

    <div id="content"> 
    <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat. 
</p> 
    <p> 
Maecenas pellentesque elementum sapien, eu imperdiet turpis scelerisque pulvinar. Proin elit elit, condimentum non lacinia quis, congue vel justo. Sed rutrum magna quis neque sollicitudin vestibulum. Morbi ut eros vitae metus rhoncus sodales. Donec vel velit sed orci imperdiet tristique vel sed odio. Duis eget tellus purus. Sed blandit, tortor nec luctus tempor, tellus elit rutrum nibh, vel egestas libero velit eu libero. Nullam rhoncus, sem in ornare aliquet, dui purus consectetur felis, vitae porta elit leo et eros. Integer pharetra, mauris in lobortis aliquam, est eros commodo ante, sit amet facilisis mauris ipsum pharetra risus. Etiam vel nulla justo. Curabitur pretium facilisis consectetur. Aenean et mauris eros, nec pulvinar diam. Integer ut diam non leo ullamcorper vehicula a in mi. Curabitur adipiscing, enim feugiat porttitor pretium, lacus justo sodales odio, et congue mi sem sed ligula. Etiam accumsan accumsan tortor id pretium. 
</p> 
    <p> 

Curabitur quis nunc turpis, vitae vestibulum magna. Aliquam ultrices mi eget arcu convallis feugiat. Integer lacinia ipsum suscipit justo dapibus ultrices. Ut quis arcu vel nibh tincidunt tempus. Quisque imperdiet fermentum leo a ultrices. Donec arcu odio, congue eget elementum a, dignissim at felis. Donec in nibh dui. Curabitur adipiscing consequat urna, sed vehicula neque molestie at. Sed consequat metus velit. Nunc justo neque, tincidunt et faucibus et, mattis sit amet nulla. Integer elementum, purus in malesuada mollis, orci nisi ullamcorper nisl, quis tempor nunc augue et arcu. Integer massa metus, faucibus et vestibulum at, egestas vel enim. Integer condimentum sollicitudin sollicitudin. Nulla volutpat ultricies mauris, eget hendrerit eros accumsan ac. Suspendisse aliquam, lacus ut fringilla auctor, sem sapien elementum nulla, a hendrerit enim turpis vitae dolor. Pellentesque ac mi quis ipsum commodo venenatis. 
</p> 
    </div> 



</div> 
<div id = "footer"> 
footer 
</div> 
</body> 
</html>

CSS：

body{ 
    background: #eee; 
} 
#page{ 
    background: #cccccc; 
    width: 800px; 
} 
#sidebar{ 
    background: #999; 
    width: 200px; 
    height: 100%; 
    margin-right: 10px; 
    float: left; 
} 
#sidebar-content{ 
    height: 90%; 
} 
#sidebar-bottom { 
    height: 50px; 
    vertical-align: bottom; 
} 

#image-1{ 
    width: 100px; 
    float: left; 
} 

#content{ 
    height: 100%; 
    left: 200px; 
    background: #333; 
} 

#footer{ 
    background: #3ee; 
}

可以随意修改，使之为中心，这样的 - 但没有使用任何框架，这是它的要点。

这里是解决方案的在线： http://www.gorbikoff.com/stuff/1732288.htm

CSS是在： http://www.gorbikoff.com/stuff/1732288.css

来源

2009-11-13 22:36:24 konung

但图像并不总是应该在底部。如果只有很少的内容，它们不应该在页面的底部。 – 2009-11-13 22:44:30

理查德如果以这种方式设计它们，它们将位于侧边栏的底部 - 您应该使其始终等于内容。让我在涂料店做点什么来解释我的意思。 brb :-) – konung 2009-11-13 22:49:19

嗯，问题是我不知道如何使边栏的高度等于内容的高度。内容是动态的，所以高度不固定。 – 2009-11-13 22:52:57

回答

相关问题