Question

注意：我之前已经问了很多次这个问题，但这些问题的解决方案都没有对我有用。请记住，在前端工作方面，我缺乏经验。

当我的浏览器缩小尺寸时，右边的块 - ＃client-body - 向＃client-toolbar块移动并重叠。

如何制作它以便在调整浏览器大小时，实际上没有任何内容会改变位置，而是显示滚动条？

CSS：

html {
    background-color: #E6E6E6;
    color: #1A1A1A;
}

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

#nav {
    background-color: #290052;
    width: 100%;
    font-family: Arial;
    height: 50px;
    position: relative;
}

#nav ul {
    padding: 0;
    margin: auto;
    position: relative;
}

#nav ul li {
    display: inline-block;
    margin-right: 15px;
    float: right;
}

#nav ul li a {
    color: #ffffff;
}

#nav ul li a,visited {
    color: #ffffff;
    display: block;
    padding: 15px;
    text-decoration: none;
}

#client-body {
    display: block;
    height: 700px;
    width: 750px;
    background-color: #ffffff;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    margin-bottom: auto;
    padding: none;
}

#client-toolbar {
    display: block;
    height: 700px;
    width: 250px;
    background-color: #ffffff;
    position: relative;
    margin-left: 150px;
    float: left;
    margin-top: -700px;
}

#client-toolbar ul {
    list-style-type: none;
}

#client-toolbar a {
    font-family: Arial;
    color: #313131;
}

#client-toolbar #track-time {
    height: 233.333px;
}

#client-toolbar #edit-client{
    height: 233.333px;
}

#client-toolbar #add-project {
    height: 233.333px;
}

#footer {
    width:100%;
    height:30px;
    position:absolute;
    bottom:0;
    left:0;
    clear: both;
    margin-left: 25px;
}

#footer ul {
    list-style-type: none;
    padding: none;
}

#footer ul a {
    padding: 5px;
    font-family: Arial;
}

#footer ul li {
    display: inline;
}

.center_hero-unit {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.btn-su {
    display: inline-block;
    height: 60px;
    width: 200px;
    background: #005CE6;

    color: #ffffff;
    font-family: Arial, sans-serif;
    text-decoration: none;
    vertical-align: middle;
}

（客户）index.html.erb：

    <div id="client-body">
    </div>

    <div id="client-toolbar">
        <ul>
            <div id="track-time"><li><%= link_to "Track time", '#' %></li>
            <div id="add-client"><li><%= link_to "Add client", '#' %></li>
            <div id="add-project"><li><%= link_to "Add project", '#' %></li>
        </ul>
    </div>
</div>

HTML标题：

<div id="nav">
  <div id="nav_wrapper">
    <ul>
        <% if signed_in? %>
        <li><%= link_to "Sign out", signout_path, method: "delete" %></li>
        <li><%= link_to "Settings", edit_user_path(current_user) %></li>
        <li><%= link_to "Clients", clients_path %></li>
        <li><%= link_to "Projects", projects_path %></li>
        <li><%= link_to "Home", projects_path %></li>
        <% else %>
        <li><%= link_to "Home", root_path %></li>
        <li><%= link_to "Sign in", signin_path %></li>
        <% end %>
    </ul>
  </div>
</div>

HTML页脚：

<footer id="footer">
  <nav>
    <ul>
      <li><%= link_to "Support",   '#' %></li>
      <li><%= link_to "More", '#' %></li>
    </ul>
  </nav>
</footer>

主HTML文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Time Tracking App</title>
    <%= stylesheet_link_tag "custom", media: "all",
                                           "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/header' %>    
    <%= yield %>
    <%= render 'layouts/footer' %>
  </body>
</html>

CSS：如何在调整浏览器大小时防止两个元素重叠？

0 个答案: