css - 导航背景图像 100% 页面高度-6ren

css - 导航背景图像 100% 页面高度

转载作者：太空宇宙更新时间：2023-11-04 11:14:57

24

4

我试图让导航背景图像与我的页面高度相同，但我不知道该怎么做。我尝试了在此站点上发现的许多不同的东西，但无济于事。我是 HTML5 和 CSS 的新手，如果这是一个愚蠢的问题，我深表歉意。这是我的 CSS:

body {
    background-color: #FF9933;
}
header {
    background-image: url(orangesquares.png);
}
h1 {
    background-color: #FFFFFF;
    opacity: 0.6;
    padding: 10px;
    width: 275px
}
h2 {
    color: #FF9933;
}
nav {
    background-image: url(orangesquares.png);
    float: left;
    width: 200px;
    margin-top: 0;
    Margin-bottom: 0;
    font-weight: bold;
}
nav ul {
    list-style-type: none;
    background-color: #FFFFFF;
    opacity: 0.6;
    padding: 10px;
}
#rightcolumn {
    margin-left: 205px;
    background-color: #ffffff;
    color: #000000;
    width: 80%;
}
.content {
    padding: 10px 20px 0 20px;
}
#footer {
    text-align: center;
    font-size: 11px;
}
a:link {
    color: #0033FF;
}
a:visited {
    color: #0033FF;
}
figure {
    width: 500px;
    border: 1px solid #FF9933;
    padding: 5px;
}
figcaption {
    text-align: center;
    font-size: 2em;
}

这是索引页的 HTML 代码:

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Sims 3 Open House</title>
        <meta charset="utf-8">
        <meta name="description" content="Sims 3 Open House provides information on houses included in the Sims 3 bin, such as what furniture is included and how many squares big the rooms are." />
        <meta name="keywords" content="Sims 3, the sims 3, the sims, sims, open house, house, houses, home, homes, lots and houses bin, bin, premade, premade houses, lot size, house size, furniture" />
        <link type="text/css" href="openhouse.css" rel="stylesheet" />
    </head>

    <body>

        <header>
            <h1>Sims 3 Open House</h1>
        </header>

        <nav>
            <ul>
                <li><a href="index.html">Home</a></li><br>
                <li><a href="index.html#onebedroom">One Bedroom Homes</a></li>
                <ul>
                    <li>Cabin Fever</li>
                    <li>Super Shack</li>
                </ul>
                <li><a href="index.html#twobedrooms">Two Bedroom Homes</a></li>
                <ul>
                    <li>Ginger</li>
                    <li>Oak Grove Bungalow</li>
                </ul>
                <li><a href="index.html#threebedrooms">Three Bedroom Homes</a></li>
                <ul>
                    <li>Cornucopia</li>
                    <li>Doubleday Lodge</li>
                </ul>
                <li>Contact Us</li>
        </nav>

        <article>
            <div id="rightcolumn">

                <div class="content"> 
                    <h2>Welcome</h2>
                    <p>Ever want to use a house from the Sims 3 bin but you aren't sure which one? What do they look like inside? How big are they really? What kind of     furniture do they have? Well, here you can find all that information! I have split the bin houses into categories by number of bedrooms to make your search easier. On each house's page there is detailed information about the layout of each house, how big the rooms are, and what furniture is included, plus general info like lot size and price. All screenshots were taken in <a    href="http://www.thesims3.com/assetDetail.html?assetId=7016943">Sunset Valley 2</a>. </p>

                    <a id="onebedroom"><h2>One Bedroom Homes</h2></a>


                    <figure>
                        <img src="cabinfever.jpg" width="500px" alt="The front facade of the home Cabin Fever." />
                        <figcaption>
                            Cabin Fever
                        </figcaption>
                        </figure> <figure>
                        <img src="supershack.jpg" width="500px" alt="The front facade of the home Super Shack." />
                        <figcaption>
                            Super Shack
                        </figcaption>
                    </figure>

                    <a id="twobedrooms"><h2>Two Bedroom Homes</h2></a>

                    <figure>
                        <img src="ginger.jpg" width="500px" alt="The front facade of the home Ginger." />
                        <figcaption>
                            Ginger
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="ogb.jpg" width="500px" alt="The front facade of the home Oak Grove  Bungalow." />
                        <figcaption>
                            Oak Grove Bungalow
                        </figcaption>
                    </figure>

                    <a id="threebedrooms"><h2>Three Bedroom Homes</h2></a>

                    <figure>
                        <img src="cornucopia.jpg" width="500px" alt="The front facade of the home Cornucopia." />
                        <figcaption>
                            Cornucopia
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="doubleday.jpg" width="500px" alt="The front facade of the home Doubleday Lodge." />
                        <figcaption>
                            Doubleday Lodge
                        </figcaption>
                    </figure>

                </div>

                <br> 

                <div id="footer">
                    <footer>
                        Home | One Bedroom Homes | Cabin Fever | Super Shack | Two Bedroom Homes | Ginger | Oak Grove Bungalow | Three Bedroom homes | Cornucopia | Doubleday Lodge | Contact Us
                        <br>
                        Copyright &copy; 2015 Natasha Schmidt
                    </footer>
                </div>

    </body>
</html>

最佳答案

为什么要把你的背景放在导航中？

要么让它全高

nav
{
background-image: url(orangesquares.png);
background-size: cover;
float: left;
height:100%
width: 200px;
margin-top: 0;
Margin-bottom: 0;
font-weight: bold;

}

或者我不知道，就这样吧

html{
   padding:0; margin:0;background-image: url(orangesquares.png);
background-size: cover;
}

并从导航中移除背景。

关于css - 导航背景图像 100% 页面高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33308820/

24

4

0

文章推荐： javascript - 单击行时添加图像(

标记)

文章推荐： java - Intellij GWT Super dev 模式显示空白源代码

文章推荐： linux - Arduino SD 库 arduino-core 1 :1. 0.0.1+dfsg-7 未定义引用

javascript - 剑道图表 105% 高度，而不是 100% 高度？
我有下面的图表，它填充了显示器的宽度和高度。高度始终只比屏幕大一点，因此会出现滚动条以显示底部 20 像素左右。有没有办法让 Kendo UI 显示 100%，而不是 105% 的高度？在线示例:
html - 创建当前视口(viewport)高度 div 的 100% 高度
这个问题在这里已经有了答案: Why doesn't height: 100% work to expand divs to the screen height? (12 个答案) 关闭 9 年前
CSS:iframe 不显示 100% 高度...更像是 100px 高度
此页面 ( http://purcraft.com/madeinla/) 有问题，我正在尝试使用 iframe 元素显示此页面的内容:( http://purcraft.com/madeinla/ho
css - 将子 div 的高度设置为 parent 高度 - sibling 高度
我在一个父 div 中有 2 个子 div。 Child1 是标题，Child2 是正文。我希望将 Child 2 的高度设置为 Parent - Child1 的高度。 Child2 有内容，所以它
image - 根据父宽度/高度 CSS HTML 自动调整 img 宽度/高度
我正在尝试用图像填充窗口。我正在使用 CSS 来尝试解决这个问题，但我想知道是否有一种方法可以最大化图像的宽度/高度，直到所有空白区域都被填满，但又不会破坏质量。 .rel-img-co
css - 粘性页脚和 100% 高度 - 强制 div 获得 100% 高度
这个问题在这里已经有了答案: How to make a div 100% height of the browser window (41 个回答) 关闭 8 年前。
css - 将 Sprite 图标添加到标签。有没有办法只为 Sprite 设置宽度/高度，并为标签设置第二个宽度/高度？
这可能是一个新手问题，但是是否可以将 Sprite 图标添加到带有文本的标签中？例如: labeltext .icon { width: 30px height: 30px;
jquery - 使用 jquery 设置 div 高度(拉伸(stretch) div 高度)
我有 3 个 div，分别是 header、content 和 footer。页眉和页脚具有固定的高度，并且它们被设计为 float 在顶部和底部。我想要使用 jquery 自动计算中间的 con
javascript - 计算内部 div 的宽度/高度(以毫米为单位)(相对于已知宽度/高度(以毫米为单位)的外部 div。)
我有一个外部 div，其指定的宽度/高度(以毫米为单位)。 (mm只是赋值，不用于渲染)。里面有另一个 div，其实际宽度/高度(以 px 为单位)。两个 div 可以具有不同的比例。我想要做的
css - 如果我使用 HTML5 文档类型，为什么不能使我的 div 100% 高度？我如何获得它的 100% 高度
我正在为一个非常简单的画廊 webapp 进行布局排序，但是当我使用 HTML5 文档类型声明时，我的一些 div(100%)的高度会立即缩小，我不能似乎使用 CSS 将它们丰满起来。我的 HTML
css - 如果我使用 HTML5 文档类型，为什么不能使我的 div 100% 高度？我如何获得它的 100% 高度
我正在为一个非常简单的画廊 webapp 进行布局排序，但是当我使用 HTML5 文档类型声明时，我的一些 div(100%)的高度会立即缩小，我不能似乎使用 CSS 将它们丰满起来。我的 HTML
iphone - 如何更改 iphone 中 UISearchBar 的 UiSearchbar 高度、宽度、颜色和 Uitextfield 高度？
我想更改 UISearchBar。文本字段的高度和宽度。我的问题是如何更改 iphone 中 UISearchBar 中的 UiSearchbar 高度、宽度、颜色和 Uitextfield 高度？
html - 如果 parent 的 div 也是 100% 宽度/高度，如何给 child div 宽度/高度 100%
我想要两个宽度和高度均为 100% 的 div。我知道子 div 不会工作，因为父 div 没有特定的高度，但有没有办法解决这个问题？ HTML: CSS: body
jQuery if 高度
我有几个带有“priceText”类的 div，我试图实现如果 div.priceText 高度小于 100px，则隐藏 this div 中的图像。我无法让它工作。我已成功隐藏所有 .priceT
javascript获取表格中所有图像的自然宽度/高度
我正在尝试从 Image 列中列出的图像中获取实际图像尺寸，并将其显示在 Image Size 列中。我遇到的问题是，我只能获取第一张图片的大小，该图片会添加到 Image Size 列的每个单元格
jQuery获取容器中加载的图像宽度/高度
我正在使用一个插件，它要求我在加载图像后获取图像的宽度和高度，而不管图像的尺寸是如何确定的。
parsing - 如何在pdf中获得准确的字体大小(高度)
我有一个示例 pdf(已附)，它包括一个文本对象和一个高度几乎相同的矩形对象。然后我使用 itextrup 检查了 pdf 的内容，如下所示: 1 1 1 RG 1 1 1 rg 0.12 0 0 0
运行时的 WPF 高度
我是 WPF 新手。我试图解决的一个问题是如何在运行时获得正确的高度。在我的应用程序中，我将用户控件动态添加到代码隐藏中的 Stackpanel。 Usercontrol 包含一些 Texblock
WPF 高度/宽度
在自定义 WPF 控件中，我想将控件的宽度设置为高度的函数。例如:Width = Height/3 * x; 实现此目的的最佳方法是什么，以便控件正确且流畅地调整大小(和初始大小)？最佳答案您可以
WPF RibbonComboBox 高度
好吧，我本以为这是一个简单的问题，但显然它让我感到困惑。当我尝试设置 RibbonComboBox 的高度时，它不会移动它的实际大小，而是移动它周围的框。这是我的 XAML:

首页

博学

6Ren·AI

商城

css - 导航背景图像 100% 页面高度