Question

标记为固定!!!

我通过调整宽度来固定自己的main_container问题，导航到1280px而不是1024.

我还通过添加我写的jQuery / Javascript（下面）修复了页脚滚动。这是我的错，因为我没有意识到你无法链接在本地运行的.js文件，而无需下载文件并放入目录。所以，我只是将代码添加到头部，并链接到谷歌的Javascript库...

为新网站测试一些布局，当我崩溃浏览器窗口大小时，我的粘性页脚出现问题而不是水平滚动。它的位置是固定的，我希望如此。此外，当您调整浏览器窗口大小时，.main_container也会聚集在一起，我希望它固定在页面宽度的中心位置。

希望你能提供帮助。

HTML：

<head>
<title>MIX IT IN THE BOX</title>

<!-- normalize to clean up and standardize the browser default styles -->
<link rel="stylesheet" type="text/css" href="./_css/normalize.css">

<!-- Custom CSS --> 
<link rel="stylesheet" type="text/css" href="./_css/styles.css">

<!-- Modernizr allows HTML5 elements to work in older browsers -->
<script src"./_js/modernizr.js"></script>
<script src"./_js/scroll.js"></script>
</head>

<body>

<div class="nav_container">

<header class="navbar">
<nav>
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Store</a></li>

    <li id="Logo"><a href=""><p>Logo</p></a></li>

    <li><a href="">Blog</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>

</ul>
</nav>
</header><!-- end navbar -->

</div> <!-- end nav_container -->

<div class="main_container">

<div class="content">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting     industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br />

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br />

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br />

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br />

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br />

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br />

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

</div>

</div> <!-- end main container -->

<div class="hidden"><p></p></div> <!-- blank space after content -->

<footer id="main_footer">

<div id="footer" class="container">

    <div>   

            <form class="form_footer">
                <h4>SIGN UP TO OUR NEWSLETTER HERE &rarr; <input type="email" placeholder="your@e-mail.com" onfocus="this.placeholder = ''" onblur="this.placeholder = 'your@e-mail.com'" /></h4> <input type="submit">
            <!-- end newsletter sign-up -->
            <br />
                <h4>MY ACCOUNT &rarr; <input type="login" placeholder="your@e-mail.com" onfocus="this.placeholder = ''" onblur="this.placeholder = 'your@e-mail.com'" /> <input type="password" placeholder="password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'password'" /></h4> <input type="submit" value="Login"> <input type="submit" value="Register">
                <a href="" style="font-size: 11px; color: #B2B2B2;"><u>Forgot Your Login Details?</u></a>
                <!-- end login -->
            </form>

        <div class="social">

            <a href="">Home</a>
            <a href="">Services</a>
            <a href="">Store</a>

            <a class="social_pic" href=""><img src="./_images/Social/fb.png"></a>
            <a class="social_pic" href=""><img src="./_images/Social//twitter.png"></a>
            <a class="social_pic" href=""><img src="./_images/Social//instagram.png"></a>
            <a class="social_pic" href=""><img src="./_images/Social//linkedin.png"></a>
            <a class="social_pic" href=""><img src="./_images/Social//email.png"></a>

            <a href="">Blog</a>
            <a href="">About</a>
            <a href="">Contact</a>

        </div>

    </div>

    <div class="copyright">
        <p>Copyright &copy; <script>document.write(new Date().getFullYear());</script> MIX IT IN THE BOX.  All Rights Reserved.</p>
    </div>

</div> <!-- end footer container -->

</footer> <!-- end footer -->


</body>

CSS：

html, body {
min-width: 100%;
}

body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
margin-top: 30px;
margin-bottom: 20px;
background: url('../_images/Background/wood 4.jpg') top no-repeat; background-attachment: fixed;
background-size: 1440px 960px;
}

/* -- Header -- */

header nav {
background-color: white;
text-align: center;
}

header nav ul { 
margin: 0;
padding: 0;
list-style: none;
display: block;
line-height: 141px;
}

header nav ul li {
display: inline-block;
padding: 0px 10px;
}

header nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: black;
}

header nav ul li#Logo a {
display: block;
width: 292px;
height: 141px;
background: url('../_images/Logo/logo.png') center center no-repeat;
}

header nav ul li#Logo a p {
opacity: 0;
}

/* -- Navigation Container -- */

.nav_container {
width: 1024px;
margin: 0 auto;
padding: 10px 24px;
background-color: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
}

/* -- Main Container -- */

.main_container {
color: black;
width: 1024px;
margin: 20px auto;
padding: 10px 24px;
background-color: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
}

/* -- Footer -- */

#footer {
background-color: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
}

.copyright {
color: black;
opacity: 0.2;
padding-bottom: 2px;
margin-top: 0px;
margin-bottom: -8px;
width: 1440px;
}

footer#main_footer div.container {
text-align: center;
margin-top: 40px;
}

.form_footer {
display: block;
margin-bottom: -12px;
}

div.social img {
width: 40px;
margin-top: 12px;
}

.social, a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
width: 1440px;
}

.social_pic {
padding: 0px;
position: relative;
top: 12px;
}

h4 {
display: inline-block;
margin-top: 10px;
margin-bottom: 0px;
}

/* -- blank spacing at bottom of main container -- */

div.hidden{
height: 170px;
width: 100px;
}

/* -- form styling -- */

form {
margin-top: 10px;
margin-bottom: 0px;
width: 1440px;
}

/* -- center placeholder form text -- */

input {
text-align: center;
}

::-webkit-input-placeholder {
text-align: center;

}

:-moz-placeholder {
text-align: center;

}


/* Force Elements to Self Clear its Children: http://css-tricks.com/snippets/css/clear-fix/ */

.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

我在jsFiddle中读到可能使用javascript来粘贴页脚水平滚动，但无法让它工作......

使用Javascript：

$(document).ready(function(){  
    console.log("scrolling");
$(window).scroll(function(){

        $('#footer').css('left', 0 - $(this).scrollLeft());
    });
    });

好的，提前感谢任何帮助，真的需要它，因为我只是学习所有这些东西的新手。谢谢！

Answer 1

如果我理解你的问题，你有两个问题：

.main_container在您调整浏览器大小时不会缩小并保持居中。
当您调整浏览器大小时，#footer的内容不会居中并保持其原始位置和宽度，从而导致水平滚动。

问题在于您为创建此布局所做的一些事情。如果我要创建它，它看起来像这样：

<强> HTML

<div class="container">
    <header class="header">
        <h1>Header</h1>
        <p>Nav and stuff up here too.</p>
    </header>

    <main class="main">
        <p>Main content here.</h3>
    </main>
</div>

<footer class="footer">
    <div class="container">
        <p>Footer stuff down here.</p>
    </div>
</footer>

<强> CSS

body {
    background: #333;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
}

.header,
.main,
.footer {
    background: white;
    padding: 40px;
}

.main {
    margin-top: 20px;
    margin-bottom: 150px; 
}

.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 40px rgba( 0, 0, 0, .1 );
}

除非我遗漏了某些东西，否则这就是你需要的布局和功能。这是一个实例的JSFiddle：http://jsfiddle.net/galengidman/x17wtj52/

粘滞页脚没有水平滚动的问题，当窗口大小折叠时主要内容聚集

1 个答案: