自动伸缩侧柱

发布于 2024-12-08 12:55:49 字数 324 浏览 0 评论 0原文

我正在构建一个网页，它有一个名为 content 的 div 标签，其 CSS 属性为 min-height: 200px;我想放入另一个高度为 100% 的 div 标签，但是，这不起作用。我希望它能够自动增长，以便当内容变大时看起来很漂亮。但是我不确定如何做到这一点。

感谢任何帮助，但我希望它严格 XHTML 并兼容 CSS3。

尝试做这样的事情： Something like this

-他们灰色的侧边栏，是我想做的，它被添加了在绘画方面，其余的我已经用 CSS3 完成了。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最单纯的乌龟 2024-12-15 12:55:49

我理解身高问题：100%
以下是我仅使用 css 的方法：

这里是：

<html>

<head>
<style type="text/css">
    body{
        background-color: #cbf;
    }

    #wrap {
        border-radius: 20px;
        margin: 10px auto;
        overflow: hidden;
        width: 900px;
    }

    #head {
        text-align: center;
        background-color: red;
        height: 100px;
        overflow: hidden;
    }

    #main {
        float: left;
        background-color: gray;
        min-height: 200px;
    }

    #sidebar {
        width:200px;
        float: left;
        background-color: gray;
    }

    #content {
        float:left;
        background-color: white;
        min-height: 200px;
        width: 700px;
    }

</style>
<title>
    example
</title>
</head> 

<body>
<div id="wrap">
    <div id="head">
        <h1>example site name</h1>
    </div>
    <div id="main">
        <div id="sidebar">
             
        </div>
        <div id="content">
             
            <p>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>

            </p>
        </div>
    </div>
</div>
</body>
</html>

您还可以使用 bg.png 创建侧边栏，

        #wrap {
            background: url('bg.png') repeat-y white;
        }

该图像需要是 1 像素高的图像，与侧边栏具有相同的宽度。
在这种情况下使用 css height 100% 将不起作用。

希望这有帮助。

I understood the issue with height: 100%
Here is how I would do it using only css:

here it is:

<html>

<head>
<style type="text/css">
    body{
        background-color: #cbf;
    }

    #wrap {
        border-radius: 20px;
        margin: 10px auto;
        overflow: hidden;
        width: 900px;
    }

    #head {
        text-align: center;
        background-color: red;
        height: 100px;
        overflow: hidden;
    }

    #main {
        float: left;
        background-color: gray;
        min-height: 200px;
    }

    #sidebar {
        width:200px;
        float: left;
        background-color: gray;
    }

    #content {
        float:left;
        background-color: white;
        min-height: 200px;
        width: 700px;
    }

</style>
<title>
    example
</title>
</head> 

<body>
<div id="wrap">
    <div id="head">
        <h1>example site name</h1>
    </div>
    <div id="main">
        <div id="sidebar">
             
        </div>
        <div id="content">
             
            <p>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>

            </p>
        </div>
    </div>
</div>
</body>
</html>

You can also alternatively create the sidebar with

        #wrap {
            background: url('bg.png') repeat-y white;
        }

bg.png needs to be a 1 pixel high image that has the same width as the siderbar.
using css height 100% will not work in this case.

Hope this helps.

回复收藏 0 原文

~没有更多了~

关于作者

羁〃客ぐ

暂无简介

0 文章

0 评论

23 人气

关注发私信

已经忘了多久

文章 0 评论 0

关注

15867725375

文章 0 评论 0

关注

LonelySnow

文章 0 评论 0

关注

走过海棠暮

文章 0 评论 0

关注

轻许诺言

文章 0 评论 0

关注

信馬由缰

文章 0 评论 0

友情链接

文江博客

自动伸缩侧柱

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

自动伸缩侧柱

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。