Question

我试图使用flexbox制作一个＆＃34;粘性＆＃34;页脚，它在其他页面上工作正常，但在具有表单的页面上，背景图像无法加载。

仅在使用flexbox时才会出现此问题。没有它，一切都正常加载。我尝试过使用浏览器前缀。

当页面加载时，它会在没有背景图像的情况下加载，但只要我在表单字段内单击或将鼠标悬停在“a：hover”链接上，就会显示背景图像。如果单击“提交”，图像将再次消失，直到您在表单字段内单击或将鼠标悬停在链接上。

通过单击或悬停使图像显示后，再次使用“提交”按钮消失，然后单击或悬停重新出现，它不会再次消失，这让我想知道它是否与动作属性相关表单标签，现在不存在（但这个消失的图像问题与action属性的＃占位符保持一致）。我目前没有服务器地址来发送表单数据，所以我真的不知道如何测试这个假设。

下面的HTML和CSS。

HTML：

<body>
<div class="not-footer">
    <header>
        <div>
            <h1>Name Namerson</h1>
            <nav>
                <a href="index.html">About</a>
                <a href="portfolio.html">Portfolio</a>
                <a href="contact.html">Contact</a>
            </nav>
        </div>
    </header>
    <div class="main">
        <section>
            <h2>Contact</h2>
            <form>
                <label>
                    Name
                    <input type="text" name="name" placeholder="John Smith">
                </label>
                <label>
                    Email
                    <input type="email" name="email" placeholder="example@gmail.com">
                </label>
                <label>
                    Message
                    <textarea name="message"></textarea>
                </label>
                <button name="submit">Submit</button>
            </form>
        </section>

        <aside>
            <h3>Connect with Me</h3>
            <div>
                <a href="https://github.com">
                    <img src="assets/images/github_icon.png" alt="github link"></a>
                <a href="https://www.linkedin.com">
                    <img src="assets/images/linkedin_icon.png" alt="linked in link"></a>
                <a href="https://stackoverflow.com">
                    <img src="assets/images/stackoverflow_icon.png" alt="stack overflow link"></a>
            </div>    
        </aside>
    </div>
</div>
<footer class="flex-footer>
    &#9400;Copyright 2018 Name Namerson
</footer>

CSS（flex样式位于顶部：其余部分包括在内以防万一...）：

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-image: url('../images/circles-and-roundabouts.png');
    color: #777777;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

/* flex styling */
.not-footer {
    flex: 1 0 auto;
}

.flex-footer {
    flex-shrink: 0;
}

/* header styling */
header {
    border-bottom: 2px solid #cccccc;
    background-color: #fff;
}

header div {
    max-width: 960px;
    min-width: 0;
    min-height: 0;
    margin: auto;
}

/* main content styling */
.main {
    max-width: 960px;
    margin: auto;
}

section {
    float: left;
    border: 2px solid #dddddd;
    background-color: #fff;
    width: 650px;
    margin: 30px 32px 30px 0;
}

/* contact.html styling */
section form {
    padding: 30px;
}

input, textarea {
    display: block;
    min-width: 100%;
    max-width: 100%;
    border: 2px solid #e6e6e6;
    margin: 8px 0 16px 0;
    padding: 8px 12px;
    box-sizing: border-box;
}

textarea {
    height: 200px;
}

form button {
    background-color: #4aaaa5;
    color: #fff;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    border: none;
    padding: 10px 30px;
    font-size: 1em;
}

/* aside styling */
aside {
    float: right;
    border: 2px solid #dddddd;
    background-color: #fff;
    width: 270px;
    margin: 30px 0 30px 0;
}

aside div {
    width: 202px;
    margin: auto;
    padding: 25px 0 25px 0;
}

aside a:hover,
.box a:hover {
    opacity: .7;
}

/* footer styling */
footer {
    background-color: #666666;
    color: #fff;
    border-top: 5px solid #4aaaa5;
    padding: 35px 0 35px 0;
    text-align: center;
    font-size: .75em;
}

/* nav syling */
nav a {
    display: inline-block;
    text-decoration: none;
    color: #777777;
}

nav {
    display: inline-block;
    float: right;
    padding-top: 30px;
}

nav a:hover {
    color: #474747;
}

nav a {
    border-right: 1px solid #e6e6e6;
    padding: 0 16px 0 10px;
}

nav a:last-child {
    padding: 0 0 0 10px;
    border: none;
}

/* heading styling */
h1, h2, h3, h4 {
    font-family: Georgia, Times, 'Times New Roman', serif;
}

h1 {
    display: inline-block;
    font-size: 1.75em;
    font-weight: bold;
    color: #fff;
    background-color: #4aaaa5;
    padding: 25px 30px 25px 30px;
}

h2 {
    font-size: 1.6em;
    font-weight: bold;
    color: #4aaaa5;
    padding: 30px 0 30px 0;
    margin: 0 30px 0 30px;
    border-bottom: 2px solid #cccccc;
}

h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: #4aaaa5;
    padding: 25px 0 20px 0;
    margin: 0 30px 0 30px;
    border-bottom: 2px solid #e6e6e6;
}

h4 {
    font-size: 1.4em;
    color: #fff;
    background-color: #4aaaa5;
}

CSS：使用flexbox时无法正确加载背景图像

0 个答案: