问题
I'm trying to not use adobe pre-defined CSS templates and instead create my own. I have a 130px height header i want to span the entire width. Beneath that, I want fixed columns of 150px on the far left and far right of the page. The middle, I want to span the entire width of the browser. All of these contained in a "container" div.
My header is fine, floated left and width = 100%. Next, left column width = 150px and floated left. No problem. Then, the "content", which when i float left appears in line where it should be. Then the 150px-wide right column, also floated left.
What do I set the content (middle div) width to be? If I do 100%, it puts it beneath the left column - even if I set margins of 150px on both sides to accommodate the columns. If I do "auto" it also breaks the horizontal integrity. Right now it's at 70%, which makes them all line up, but doesn't take up the full screen at large resolutions. (I have a minimum width set). This seems like it should be an easy fix - my hunch is that it has something to do with the "absolute" positioning of the container div. Thanks for any ideas/help.
Here is the link to the page:
http://www.mynextbit.com/Fifty%20Stars%20Thirteen%20Stripes/index.html
Here is my code:
.container {
float: left;
height: auto;
padding: 0px;
margin: 0px;
left: 0px;
top: 0px;
clip: rect(0px,auto,auto,0px);
position: absolute;
width: auto;
min-width: 1024px;
}
.header {
}
.leftcol {
width: 150px;
float: left;
text-align: center;
}
.content {
height: auto;
float: left;
text-indent: 10px;
overflow: scroll;
width: 70%;
min-width: 700px;
}
.rightcol {
float: left;
width: 150px;
clear: none;
}
回答1:
change the order of the divs.
<div class="leftcol"></div>
<div class="rightcol"></div>
<div class="content"></div>
then in CSS change right col to
.rightcol { float: right; }
remove the float: left; and width: 70%; from the content div (no float, no width)
Here's a fiddle: jsfiddle.net/D4fPh/
Sep 17, 2014 - Update with executable snippet:
@charset "utf-8";
/* CSS Document */
.container {
float: left;
height: auto;
padding: 0px;
margin: 0px;
left: 0px;
top: 0px;
clip: rect(0px,auto,auto,0px);
position: absolute;
width: auto;
min-width: 1024px;
}
.header {
/* [disabled]float: left; */
/* [disabled]height: 130px; */
width: 100%;
}
.leftcol {
/* [disabled]height: auto; */
width: 150px;
float: left;
text-align: center;
/* [disabled]position: absolute; */
/* [disabled]left: 0px; */
/* [disabled]top: 130px; */
/* [disabled]clear: left; */
/* [disabled]min-width: 150px; */
/* [disabled]max-width: 160px; */
}
.content {
height: auto;
text-indent: 10px;
overflow: scroll;
/* [disabled]margin-left: 150px; */
/* [disabled]margin-right: 150px; */
min-width: 700px;
}
.rightcol {
float: right;
/* [disabled]height: auto; */
width: 150px;
clear: none;
/* [disabled]min-width: 150px; */
/* [disabled]max-width: 160px; */
}
body {
background-image: url(../Fifty%20Stars%20Thirteen%20Stripes/fsts_banner_repeatstripes.png);
background-repeat: repeat-x;
}
leftcollinks {
color:#710808;
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:16px;
line-height:1.8;
font-weight:bold;
}
p {
margin-left:15px;
margin-right: 15px;
font-family: Tahoma, Geneva, sans-serif;
}<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Template_FSTS_Main.dwt" codeOutsideHTMLIsLocked="false" --><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Fifty Stars Thirteen Stripes</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
body {
background-image: url(fsts_banner_repeatstripes.png);
}
</style>
<!-- InstanceEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"><script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script></head>
<body screen_capture_injected="true">
<div class="container">
<div class="header"><img src="fsts_banner_name.png" width="400" height="130" alt="Fifty Stars Thirteen Stripes"></div>
<div class="leftcol"><leftcollinks>
American Politics<br>
The Media<br>
History<br>
Economy<br>
Education<br>
Foreign Policy<br>
Philosophy<br>
Social Programs<br>
Faith & Religion<br>
U.S. Departments<br>
Science & Tech<br>
Books & Resources<br>
Miscellaneous<br>
<font color="#060648">
About FSTS</font></leftcollinks><br>
</div>
<!-- InstanceBeginEditable name="EditRegion3" -->
<div class="rightcol"><leftcollinks>
American Politics<br>
The Media<br>
History<br>
Economy<br>
Education<br>
Foreign Policy<br>
Philosophy<br>
Social Programs<br>
Faith & Religion<br>
U.S. Departments<br>
Science & Tech<br>
Books & Resources<br>
Miscellaneous<br>
<font color="#060648">
About FSTS</font></leftcollinks><br></div><div class="content">
<p>I've been thinking. That's the first good. For 31 years I haven't been...</p>
<p>I'm writing this on a typical foggy evening in Monterey, California during the middle of September. I'm staring at a stack of books on my desk, each of them unread for reasons that have defined the first three decades of my life. Reasons I'm not proud of, and have little or nothing to show for. Forgiving myself is harder than I would have expected. However, self pity it seems, will lead me nowhere - something I learned recently from a man I like to call myself. </p>
<p>What is it I want? Knowledge? To do what with? Would I be satisfied with reading every good book, article, newspaper and documentary in the world? To be filled with that much knowledge must be empowering, but logic says that's not enough. The man who invented the wrench didn't do it so he could hang it on a wall. He designed and manufactured it to serve a purpose. What good is knowledge if it doesn't serve a purpose? Knowledge must serve as a tool to create, to think, to design, to perform, to <i>do</i> something. Otherwise, the capacity of our brain has been wasted. Have I come to the right conclusion?</p>
<p>'Tis a crafty trap, the world has sprang on the minds of society. We've become content with settling on another man's reasoning. Television, the internet, even the Government is happy to do the hard work for us. They'll simply tell us what to think by embedding a message behind a nice face, some modern special effects, feelings, anything at all to hold our attention. How many people know who their congressman is? What laws have gone into effect in your area in the past couple years? Which 2012 Presidential candidate better reflects your values? Is voting important? Could you explain why? How many of us know when the last U.S. servicemember died overseas? Where do your tax dollars go? If you don't know any of that but you know who Justin Beiber is dating - you're a victim of the trap. You've been conditioned to believe that Justin Beiber is important. How many of us work a dead-end job, and yet spend our free time watching "our shows" and opinion-filled news, playing video games, partying, etc? Worse yet, how many of us have no job at all and do the same thing?</p>
<p>Well, if that is the world you desire, you can have it. I'm leaving it and never going back. I cannot fathom the hours, days, years I've wasted filling the mold of what today's America wanted me to be. I had no idea how to use my brain. I didn't know what I wanted, so I let someone else tell me. I didn't have values, morals, or principles that I derived on my own so I listened to the first shmuck with a smile and adopted his. I felt before I thought, and it's brought me down a road of self pity and guilt. I didn't know whose standard I was trying to live up to, but I knew I was always falling short. I was never quite satisfied with life. </p>
<p> More to follow...</p>
</div>
<!-- InstanceEndEditable -->
</div>
<!-- InstanceEnd -->
</body></html>回答2:
.content will scale height to fit all your content by this css:
.header {
position: absolute;
width: 100%;
height: 130px;
top: 0;
left: 0;
background: #f00;
}
.container {
position: relative;
padding-top: 130px;
height: 100%;
}
.left,
.right {
position: absolute;
width: 150px;
height: 100%;
left: 0;
top: 0;
background: #0f0;
}
.right {
left: auto;
right: 0;
background: #0f0;
}
.center {
padding: 0 150px;
background: #00f;
}<div class="header">I'm a header</div>
<div class="container">
<div class="left">I'm on the left</div>
<div class="right">I'm on the right</div>
<div class="center">I'm center</div>
</div>The example above as fiddle (displayed more properly):
http://jsfiddle.net/en6Cr/
来源：https://stackoverflow.com/questions/12433230/fixed-left-and-right-columns-liquid-middle-unable-to-span-entire-page