Mixture of % and px <div> sizes_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-18 17:15 出处：网络

I\'ve been struggling with this on and of for ages now. What I want is: A div 100% of the window height, 50% of the width, left=0%, red

相关专题：css xhtml

I've been struggling with this on and of for ages now. What I want is:

A div 100% of the window height, 50% of the width, left=0%, red
A div 100% of the window height, 50% of the width, left=50%, green
A div 100% of the window height, 800px wide, horizontally centered,blue

So the first two divs form a 2-tone background, on which the 3rd div (containing all the page content) is centered. I almost got it working with the two background-divs like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8">
<title>Test</title>
</head>

<body style="background-color:black">
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: red"></div>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: green"></div>
</body>
</html>

However it doesn't work on FF3. As far as I can tell the combination of z-order:-1 and position:absolute causes the divs to be rendered behind the body element (weird but that's what Firebug is showing).

Can anyone tell me how to achieve this? No javascript allowed. I figured one option is to set the body background red, and then only need one additional div for the green part, but I'm not sure it helps?开发者_开发百科

EDIT: SO wasn't showing my DOCTYPE tag. Suggestions don't work with that in.

Without complicating things with z-order and absolute positioning try the following

Use any basic graphics editor and make a 2000 x 1 pixel image and make the left half red and the right half green. Save the image as bg_tile.jpg and use the following mark-up

HTML:

<body>
    <div id="wrapper">
    </div>
</body>

CSS:

body {
  width: 100%;
  height: 100%;
  background-image: url(images/bg_tile.jpg);
  background-position: 50% 0;
  background-repeat: repeat-y;
}

#wrapper {
  width: 800px;
  margin: 0 auto;
  height: 100%;
  background-color: #0000FF;
}

I think this is what you are looking for:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8">
<title>Test</title>
</head>

<body style="padding:0; margin:0;">

  <div style="position:absolute; width:50%; height:100%; top:0; left:0; background-color:red"></div>
  <div style="position:absolute; width:50%; height:100%; top:0; left:50%; background-color:green"></div>


  <div style="position:absolute; height:100%; width:800px; margin-left:-400px; top:0; left:50%; background-color:blue">

<!-- Content goes here -->

  </div>
</body>
</html>

This works for me in Firefox 3.6. The blue box is centered and the content of your page can go inside it.

UPDATE: Here is an updated version that works with the !DOCTYPE string. Again I have only tested this Firefox 3.6. Let me know if this works for you.

You could always compensate by setting the body to z-order:-2 to push it back.