Question

我确定这是一个非常简单的问题，但我似乎无法让它发挥作用。我已经在这里和那里尝试过大量的调整，包括使用html和body的CSS，但没有得到我期待的结果。

基本上，我希望将每个页面上的内容放在标题（固定）和页脚（绝对）之间的中心位置。下面是其中一个页面的示例，以及页眉和页脚。

以下是 /app/views/users/edit.html.erb

html {
   margin-top: 60px;
}

</style>

<% provide(:title, "My Profile") %>
<h1><center>My Profile</center></h1>

<div class="gravatar_edit">
      <center><%= gravatar_for @user %>
      <br><a href="http://gravatar.com/emails" target="_blank">change</a></center>
</div>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@user) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>

      <%= f.label :name %>
      <%= f.text_field :name, class: 'form-control' %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation, class: 'form-control' %><br>

      <%= f.submit "Save changes", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>

以下是 /app/views/layouts/_header.html.erb

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
}

html{
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

body{
    padding: 80px;
}

header {
    padding: 10px;
    top: 0px;
    left: 0px;
    margin: 0;
    background: #fff;
    min-width: 100%;
    z-index: 1;
    justify-content: center;
    position: fixed;
    display: flex;
}

.nav {
    background: #232323;
    height: 60px;
    *display:inline;
    *zoom:1;
    width: 60%;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: top;
}

.nav li {
    display: inline;
    float: left;
    list-style-type: none;
    position: relative;
}

.nav li a {
    font-size: 14px; 
    color: white;
    display: block;
    line-height: 60px;
    padding: 0 26px;
    text-decoration: none;
    border-left: 1px solid #2e2e2e;
    font-family: Arial;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
    background-color: #2e2e2e;
}

#search {
    width: 357px;
    margin: 4px;
}
#search_text{
    width: 297px;
    padding: 15px 0 15px 20px;
    font-size: 16px;
    font-family: Arial;
    border: 0 none;
    height: 52px;
    margin-right: 0;
    color: white;
    outline: none;
    background: #494949;
    float: left;
    box-sizing: border-box;
    transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: #5a5a5a;
}

#options a{
    border-left: 0 none;
}

.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    z-index: 1;
    transition: all 0.1s;
    background: #232323;
}
.subnav li {
    float: none;
}
.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

button {
  display: inline-block;
  padding: 10px;
}

</style>
</head>
<body>
  <header>
    <ul class= "nav">
      <li><a class="active" href="/home">Home</a></li>
      <% if logged_in? %>
        <li><%= link_to "Profile", edit_user_path(current_user.id) %></li>
      <%end%>
      </li>
      <li><%= link_to "Contact", new_inquire_path, method: :get %></li>
      <li><%= link_to "Log Out", logout_path, method: :delete %></li>
      <li id= "search">
        <form action= "" method= "get">
            <input type="text" name="search_text" id= "search_text" placeholder="Search Page"/>
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
      </li>
    </ul>
  </header>
  </body>

以下是 /app/views/layouts/_footer.html.erb

<head>
<style>

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrapper {
    min-height: 100%;
    position: relative;
        padding-bottom: 300px;
}

footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

footer p {
    text-align: center; 
}

</style>
</head>

<body>
    <div class="wrapper">
        <footer>
            <small>
            Database BETA 
            </small>
        </footer>
    </div>
</body>

Answer 1

包装在一个容器中，然后对容器的css执行类似的操作：

top:50%;
transform:translateY(-50%);

Answer 2

我想出来了。 Seann部分正确，因为所有东西都应该装在一个容器里。

但是，这个css是修正它的原因：

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.container {
   margin-top: 60px; /*change this to the height of your header*/
}

HTML将内容置于页眉和页脚之间的中心位置

2 个答案: