Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

css - Two fixed width full height columns, with seamless transition to blank space

0 votes
824 views
in Technique[技术] by (71.8m points)

css - Two fixed width full height columns, with seamless transition to blank space

enter image description here

I'm having trouble creating this design. The #container should be centered, with it's two children #navigation and #content stretching to the bottom of the browser. Like this for example.

#container {
  width: 960px;
  height: 100%;
  margin: 0 auto;
}
#navigation {
  width: 200px;
  height: 100%;
  float: left;
}
#content {
  width: 760px;
  height: 100%;
  float: left;
}

But I don't know how I can create the colored blank spaces outside the container, which will blend in with the #navigation and #content creating a seamless transition from the #container to the blank space outside.

The transition between the #navigation and the #content should be the only visible.

I've tried floating the #container with two other div's containing the same background-color as #navigation and #content, but that messes it up, and trows it out of the center. How can I have my #container centered and have two div's on each side to fill in the remaining space?

Also, the blue and the red "blank" spaces was supposed to be equally wide. Besides that the drawing is accurate.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

See: http://jsbin.com/amunuz

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  html, body {
    height: 100%;
  }
  body {
    margin: 0;
    background: -moz-linear-gradient(left, #ff0000 50%, #00a9ff 50%);
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,#ff0000), color-stop(50%,#00a9ff));
    background: -webkit-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: -o-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: -ms-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: linear-gradient(left, #ff0000 50%,#00a9ff 50%);
  }
  #container {
    height: 100%;
    display: table;
    table-layout: fixed;
    width: 960px;
    margin: 0 auto;
  }
  #navigation {
    display: table-cell;
    width: 200px;
    background: #ff0000;
  }
  #content {
    display: table-cell;
    background: #00a9ff;
  }
</style>
</head>
<body>
  <div id="container">
    <div id="navigation">navigation</div>
    <div id="content">content</div>
  </div>
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

57.0k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...