html - CSS:右侧导航 DIV 以填充整个页面高度-6ren

html - CSS:右侧导航 DIV 以填充整个页面高度

转载作者：太空宇宙更新时间：2023-11-03 19:05:54

25

4

我目前正在开发一个新网站:http://maartenlodewijk.nl/2013/

右侧的浅灰色栏(里面有“测试”一词)应该是我的导航栏。几天来我一直在尝试让它的高度填充页面高度(不仅仅是浏览器高度，而是整个页面)。就像我制作的这个模型一样:http://i.imgur.com/Knjlc.jpg

我现在尝试了多种方法，从简单的方法，例如将 body 和 html 高度设置为 100%(运气不好)和 CSS hack，例如此处:ejeliot.com/samples/equal-height-columns/example -7.html(可行，但 hack 对我来说真的是最后的选择)

这是我的 HTML 和 CSS 代码。如果您想知道:是的，我有一个包装器和一个容器 div，包装器使容器居中，而容器在包装器内保持固定位置。

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maarten Lodewijk // Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="navigation">
    test
</div> <!-- end navigation -->

<div id="wrapper">
<div id="container">
    <div id="header">
    <img src="images/headerpng.png" alt="Logo" border="0" />
    </div> <!-- header -->
    <div id="weclome">
    <img src="images/homemessagepng.png" width="645" height="203" alt="Maarten Lodewijk, Communication &amp; Multimedia Designer" /></div><!-- end welcome -->
    <div id="content">
        <div id="leftcolumn">
            <h1>HEADER</h1>
                <p>TEXT</p>

                <p>TEXT</p>

                <p>TEXT</p>
            </div><!-- end leftcolumn -->

    <div id="rightcolumn">
        <h1>Contact</h1>
            <table width="286" border=0>
            <tbody>
            <tr>
                <td width="96">Mail:</td>
                <td width="180" class="rightalign">mail@maartenlodewijk.nl</td>
            </tr>
            <tr>
                <td>Telefoon:</td>
                <td class="rightalign">+31 6 348 268 52</td>
            </tr>
            </tbody>
            </table>
        <h1>HEADER</h1>
        <p>TEXT</p>

        <p>TEXT</p>

        <p>TEXT</p>


      </div><!-- end rightcolumn -->
    </div> <!-- end content -->
</div> <!-- end container -->
</div> <!-- end wrapper -->

</body>
</html>

CSS

/* ----- TAGS -------*/

body {
    font-size: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Georgia, "Times New Roman", serif;
    background: #e8e8eb url(images/bg.png) repeat-y;
    color: #666666;
}

html{
}
h1{
    font-size: 150%;
    color: #ff3366;
    padding-top:30px;
}



/* ----- LAY OUT -----*/
#wrapper{
    width:955px; 
    margin-left:auto;
    margin-right:auto;
}

#container{
    width:645px;
    margin-left:20px;
}

#content{
    padding: 0px 20px 0px 20px;
}

#navigation{
    position:absolute;
    top:0;
    right:0;
    width: 16%;
    min-width: 163px;
    max-width:233;
    background-image:url(images/navbarbg.jpg);
    height: 100%;
}


#leftcolumn{
    width:286px;
    float:left;
}

#rightcolumn{
    width:286px;
    float:right;
}

/* ----- CLASSES -----*/
.rightalign{
    text-align:right;
}

最佳答案

如果我看到了您的布局，那么最好将 position:fixed 而不是 position:absolute; 提供给您的 #navigation DIV。像这样写:

#navigation{
    position:fixed;
    top:0;
    right:0;
    width: 16%;
    min-width: 163px;
    max-width:233;
    background-image:url(images/navbarbg.jpg);
    height: 100%;
}

关于html - CSS:右侧导航 DIV 以填充整个页面高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10296157/

25

4

0

文章推荐： c# - 添加重复数字时，哪个数字字典集合会重新排序项目？

文章推荐： php - 我应该如何在 PHP CMS 中实现 CSS 样式转换器？

文章推荐： python - 如何确定 wx GLCanvas 允许的最大 WX_GL_DEPTH_SIZE？

文章推荐： c# - C#中的部分透明启动画面

iframe - 如何在谷歌浏览器中创建侧边栏(右侧)？
似乎这是不可能的，但如果有人提示如何在谷歌浏览器中创建右侧边栏(如 iframe)，任何提示都会有所帮助。谢谢。最佳答案如果你的意思是这样的这是来自 google chrome 实验 api:
c - 如何修剪该数组中的空格(右侧)？
您好，我在用 C 语言解决编程任务时遇到问题。 The funktion "Trim" should replace all spaces at the end of a String with nu
c# - 查找将窗口停靠到左侧/右侧
有什么方法可以找到一个事件(或属性或方法或类似的东西)来检测窗口停靠到左侧或右侧吗？描述: 通过 WindowState 属性，您可以了解当您的窗口在正常/最小化/最大化这三种状态之间改变状态时。在
c++ - 寻找算法来确定一个点是否在圆弧的左侧/右侧
我目前需要找到一个算法来确定一个点是在圆弧的右侧还是左侧。这是以下算法的扩展以包含弧: // isLeft(): tests if a point is Left|On|Right of an i
selenium-webdriver - 如何将窗口位置设置到屏幕的左侧/右侧
我正在使用 Selenium 执行测试，该测试在 3 个浏览器上并行执行。我想以下一种方式定位 window :左侧，右侧和底部，所以基本上我正在寻找与 (start btn+left btn...)
jquery 在表单中插入 div 右侧
如果我有下面的代码，并且我想插入一个带有 jquery 的 div 作为表单标记内的第一个元素，那么最好的方法是什么？ //i want to insert a div here with
python - 排列排序列表中的元素，使所有冗余元素位于列表的左侧/右侧
有没有比这个更好的方法来解决这个问题？ def 渲染(arr): single_elements = [] double_elements = [] for i in xrange(len(arr
html - 右侧 float 元素
Home About
html - 右侧 float 的div无法调整其左侧图像的大小并溢出
我遇到的问题是: www.dondolomemories.it 当调整窗口大小时， Logo 图像直到最后一刻才调整大小，导致可怕的两行菜单溢出。我花了将近 2 个小时尝试大量不同的设置。有人可以帮
右侧 float 下的 CSS
我希望我能很好地解释这一点。我有一个 style="float: right;"的 div在这个 div 中，我有一个包含一些编辑器字段的表。但现在我想要两个文本编辑器框(在 .NET MVC3 @H
html - 右侧 div 的放置和并排设计
如果有人能帮助我解决这个问题，我将不胜感激，因为我无法让它工作。这是我正在努力处理的代码:http://jsfiddle.net/sp91c3nk/ 基本上，我希望右侧导航栏与灰色主要内容区域处于同
css - 在图像的顶部、右侧、底部和左侧对齐文本？
我正在尝试在图像的所有四个边上添加文本，但我无法让正确的文本正确对齐。右边的文字仍然在左边。 fiddle :https://jsfiddle.net/y75L0ww9/ Text on top Te
半高的 css3 阴影框顶部和左侧 + 右侧
我正在尝试为顶部以及左侧和右侧设置 css 阴影，但高度降低。我熟悉模糊/半径，但我希望阴影非常短。 picture from wix template (还不能上传，抱歉) 有人可以帮帮我吗？我看到
html - 如何将按钮放在另一个按钮的(右侧)旁边
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
CSS:想要位置:粘性以将元素放置在其父容器的底部/右侧
请看这个jsfiddle . 我想要与 innerText “嗨!”始终出现在其包含父级的可见部分的底部/右侧。它不应与其父级的内容一起滚动。 HTML: Header
html - 右侧 float 提交
我有一个输入框和一个提交按钮。当我向右浮动提交按钮时，我希望它在与输入字段相同的点结束 - 这是我的意思的一个例子:http://prntscr.com/aggln5 目前，输入和提交在不同的点结束
css - 右侧 float 元素的奇怪填充或边距
我基本上刚刚开始让我的网站响应，但出于某种原因，语言 div (#lang) 设置为向右浮动，正在向右浮动，但在它的右侧有一个小边距。虽然没有填充设置父 div #container，但我无法理解。
html - 右侧 float 框
我目前正在创建一个网站，该网站有一个带有文本等内容的居中框。现在，我还想要一个漂浮在右边的盒子，与我的主盒子有一点缝隙。留个图吧，我画的红框就是我要制作的 float 框。顺便说一句。蓝色方框只是我
css - 右侧 Bootstrap 上的个人资料图片
我不是 UI 开发人员，但这次需要玩 css。为用户配置文件编写表单。我快完成了，但还有一个小问题。问题个人资料图片未正确显示在右侧。因此，第一个字段(组织名称)显示不正确自从过去两个小时以来，
javascript - 卸下右侧和底部/右侧 handle
我有以下脚本: http://jsfiddle.net/rYFEY/12/ 效果很好，除了我需要移除右侧和右下角的 handle ，只留下底部 handle 用于调整大小。目前，如果我点击右 hand

首页

博学

6Ren·AI

商城

html - CSS:右侧导航 DIV 以填充整个页面高度