Question

我正在尝试使用顶部菜单栏区域创建一个布局，然后使用固定和覆盖背景的分割75/25屏幕。

--------------------------------------------------------
|                                                      |
--------------------------------------------------------
|                                      |               |
|                                      |               |
|                                      |               |
|                                      |               |
|                                      |               |
|                                      |               |
--------------------------------------------------------

左手主区域应按照任何正常页面在y方向上滚动。

顶部菜单栏应滚动显示主要内容。

但右侧区域的区域需要具有固定的背景，可以缩放并覆盖整个区域（使用CSS封面属性），并且是固定的 - 因此它不会滚动，始终覆盖此区域，并且始终可见。

我可以同时做部分但不是一切！

我可以获得75/25分割，获得顶部栏和分割，或获得遮盖和固定背景，但不能让所有东西一起工作！

忽略顶部栏，此代码适用于除rhs背景位置之外的所有内容。背景是固定的，并且rhs背景可以缩放和覆盖，但它不在块内的正确位置：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.lhs {
width: 75%;
float: left;
background: url(lhs_bg.jpg) repeat left top;
}
.rhs {
width: 25%;
float: right;
background: url(rhs_bg_1.jpg) no-repeat left center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

</head>
<body>

<div class="lhs">

lhs

<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11

</div>
<div class="rhs">

rhs

<br /><br /><br /><br /><br /><br />1
<br /><br /><br /><br /><br /><br />2
<br /><br /><br /><br /><br /><br />3
<br /><br /><br /><br /><br /><br />4
<br /><br /><br /><br /><br /><br />5
<br /><br /><br /><br /><br /><br />6
<br /><br /><br /><br /><br /><br />7
<br /><br /><br /><br /><br /><br />8
<br /><br /><br /><br /><br /><br />9
<br /><br /><br /><br /><br /><br />10
<br /><br /><br /><br /><br /><br />11

</div>

</body>
</html>

数字只是用来显示滚动的内容，并确保页面比浏览器更高，以强制滚动。

我的猜测是背景图像仍在调整以覆盖整个屏幕，而不仅仅是右手区域的父div元素 - 因此您只能看到rhs区域中的部分完整图像，而不是整个图像。

任何提示？！

Answer 1

你想要实现这个目标吗？ http://jsfiddle.net/oneeezy/kc4umn1c/1/

    /* Rows (clears floats) */
    .row:before, .row:after { content: " "; display: table; }
    .row:after { clear: both; }
    .row { *zoom: 1; clear: both; }

    .wrapper { margin: 4em auto 0; height: 100%; }
    header { background: black; position: fixed; top: 0; left: 0; right: 0; padding: 1em; color: white; }
    main { width: 75%; float: left; display: block; background: #f2f2f2; padding: 1em; }
    nav { width: 25%; float: left; display: block; background: yellow; padding: 1em; position: fixed; right: 0; top: 5em; }
    p { background: white; padding: 2em; margin: 1em 1em 2em; }

Answer 2

你在寻找像这样的东西吗？

我用 #filler { 最小高度：700像素; } 使网站滚动。

<head>
 <title>My Website</title>
 <style type='text/css'>
    body {
      background-color: #EEE0A7;
      margin:0px;
      min-width:1200px;
    }
    .container {
      text-align: center;
      display:block;
    }
    #rightbanner {
      background-color: orange;
      width: 25%;
      float: right;
      margin-top: 1em;
      margin-right: 2%;
      min-height:250px;
      padding:10px;
    }
    #content {
      position:relative;
      min-width:475px;
      background-color: orange;
      margin-left: 2%;
      margin-right: 30%;
      min-height:350px;
      margin-bottom:1em;
      margin-top:1em;
   }
   #filler {
      min-height:700px;
   }
   h2 {
     padding:0;
     margin:0;
     font-size:1.2em;
   }
   a {
     color:black;
     font-family: "Times New Roman", Georgia, Serif;
   }
   p {
     padding:0;
     margin:5px;
   }
  `.item {
     width:468px;
     margin:0 auto;
     padding: 0;
     border:gray solid 2px;
     border-radius:10px;
     }
   header {
     top:1em;
     margin-right:2%;
     margin-left:2%;
     background-color: orange;
     height: 3em;
     margin-top:1em;
   }
   h1 {
     margin-top:0;
   }
   }
   #search {
     display:none;
   }
   </style>
   </head>
   <body>
     <div class="container">
       <header>
         <a href="#"><h1>My Website</h1></a>
       </header>
       <div id="rightbanner">
         <div  id="search">
           <b>Search Box:</b><br>
            <form method="get" action="#">
             <input type="text" id="search_input" name="search" placeholder="Search"   /><br>
             <input type="submit" value="Search"/>
           </form>
         </div>
         <b>MENU</b><br>
         <div id=navbar>
           <a href='#'>Site 1</a><br><a href='#'>Site 2</a><br>      
         </div>
       </div>
       <div id="content"><br>
    <div class='item'>
         <h2><a href='#'>Test-Link!</a></h2>
         <audio  controls>
            <source src=#' type='audio/wav' />
           <source src='#' type='audio/mp3' />
         </audio>
         <p><b>From:</b><a target='_blank' href='https://www.youtube.com/'>Video XY</a></p>
         <p><h2><a href='download.php?id=1'>DOWNLOAD</a></h2></p>
       </div><br>
    <div class='item'>
         <h2><a href='#'>Link-Test-2!</a></h2>
   Here comes text
         <p><b>Aus:</b><a target='_blank' href='https://www.youtube.com/'>Video ABC</a></p>
         <p><h2><a href='download.php?id=2'>DOWNLOAD</a></h2></p>
       </div><br>
       <div id="filler">
       </div>
       </div>
     </div>
   </body>

Answer 3

尝试在.rhs中添加代码

right: 0px;
position: fixed;

看看这是不是你想要的。或者你的意思是让rhs内容也向上移动，但是rhs背景会停留吗？

如果是这种情况，那么只需为仅具有背景风格的rhs添加另一个div。 Sample

Answer 4

听起来你想要在右侧div固定背景，内容滚动它？

查看这篇文章： http://nicolasgallagher.com/flexible-css-cover-images/

根据那篇文章，这就是我所做的：

<html>
<head>
    <style>
    html {
    height: 100%;
    width: 100%;
    }

    body {
    margin: 0px auto;
    background-color:blue;
    }

    #menu{
    height:250px;
    background-color:green;
    }

    #container{
    position:relative;
    }

    #lhs {
    width: 75%;
    float:left;
    background: url(lhs_bg.jpg)repeat left top;
    }

    #rhs {
    width: 25%;
    float:right;
    background-image:url(rhs_bg.jpg);
    background-repeat:no-repeat;
    background-position:50%;
    background-size: cover;
    }
</style>

</head>

<body>

<div id = "menu"></div>
<div id = "container">
    <div id = "lhs">
        lhs
    <br /><br /><br /><br /><br /><br />1
    <br /><br /><br /><br /><br /><br />2
    <br /><br /><br /><br /><br /><br />3
    <br /><br /><br /><br /><br /><br />4
    <br /><br /><br /><br /><br /><br />5
    <br /><br /><br /><br /><br /><br />6
    <br /><br /><br /><br /><br /><br />7
    <br /><br /><br /><br /><br /><br />8
    <br /><br /><br /><br /><br /><br />9
    <br /><br /><br /><br /><br /><br />10
    <br /><br /><br /><br /><br /><br />11
    </div>

    <div id="rhs">
        rhs
    <br /><br /><br /><br /><br /><br />1
    <br /><br /><br /><br /><br /><br />2
    <br /><br /><br /><br /><br /><br />3
    <br /><br /><br /><br /><br /><br />4
    <br /><br /><br /><br /><br /><br />5
    <br /><br /><br /><br /><br /><br />6
    <br /><br /><br /><br /><br /><br />7
    <br /><br /><br /><br /><br /><br />8
    <br /><br /><br /><br /><br /><br />9
    <br /><br /><br /><br /><br /><br />10
    <br /><br /><br /><br /><br /><br />11

</div>
</div>

</body>
</html>

这使得右侧div中的背景图像保持固定，但是以右侧div为中心。

CSS背景封面 - 固定，只有半屏？

4 个答案: