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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T20:04:53+0000

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>

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags