Question

如何制作本页顶部和底部的横幅（http://i.imgur.com/SxjbCJV.jpg）而不是页面的两侧？

我目前将它们都固定在页面的顶部和底部：

#header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 66px;
    z-index: 999;
}

#footer { 
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 66px;
    z-index: 999;
}

HTML：

<body>

<div id="wrapper">

    <a href="project.html">
        <div id="header">
            <button id="next-button" href="project.html"><i class="fa fa-arrow-circle-right fa-4x"></i>
            </button>
        </div>
    </a>

    <div id="main">

        <div id="splash">
            <div id="name">
                <h1 class="wow animated flipInX">Max Wilson</h1>
            </div>

            <div id="profile">
                <img src="img/Logo.png" class="wow animated rollIn" data-wow-delay="1s">
            </div>

            <div id="subtext">
                <h2 class="wow animated fadeInUp" data-wow-delay="2s">Aspiring Developer </h2>
            </div>
        </div>

    </div>
</div>

<a href="project.html">
    <div id="footer">
        <button id="prev-button" href="project.html"><i class="fa fa-arrow-circle-left fa-4x"></i>
        </button>
    </div>
</a>

提前致谢！最大

Answer 1

您是否尝试将页眉和页脚浮动到左侧？

例如：

#header { 
    position: relative;
    float: left;
    width: 50px; 
    height: 500px;
    background-color: #44f;
}

#footer { 
    position: relative;
    float: left; 
    width: 50px;
    height: 500px;
    background-color: #44f;
}

#wrapper{   text-align: center; 
    margin-left: auto; 
    margin-right: auto;
}

#main{ width: 800px;
    float:left;
}

enter image description here

Answer 2

这是一个简单而有趣的方法：提供string dataAfterRead; // contains data locally stored. dict = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize(Dictionary(string, double>>(dataAfterRead); body和内容display: flex，使其占用所有可用空间，并将其他元素固定在任何一侧。< / p>

flex-grow: 1

<div class="side">
  <h3>asdf</h3>
  <h3>asdf</h3>
  <h3>asdf</h3>
  <h3>asdf</h3>
</div>

<div id="content">
  <p>asdfasdf</p>
</div>

<div class="side">
  <h3>asdf</h3>
  <h3>asdf</h3>
  <h3>asdf</h3>
  <h3>asdf</h3>
</div>

https://jsfiddle.net/JackHasaKeyboard/rz86xwxh/2/

在网页上的侧横幅

2 个答案: