2

I was thinking it might be possible just to have one wrap, rather than a seperate one on the header and footer as well.

Can this be done, can I have a single wrap container that puts the content in the middle at a fixed width on all elements?

Here is the jsfiddle: http://jsfiddle.net/HMsKa/

Here is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
        <title>Title</title>
        <link href="/static/css/main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="container-wrap">
            <div id="header-wrap" class="full_width">
                <div id="header-container" class="dc1">
                    <div id="header" class="thin_width rel">
                        <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
                        <ul>
                            <li><a href="/posts/list/">Link1</a></li>
                            <li><a href="/posts/create/">Link 2</a></li>
                            <li><a href="/about">Link 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="container" class="thin_width">
                <div class="full_width" style="height:auto;">
                    <div id="col-main">                
        <h1>Sed ut perspiciatis unde</h1>
            <div id="fullwidth">
                <form id="searchForm" action="/search">
                        <input type="text" name="kw" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Keyword">
                        <input type="text" name="loc" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Location">
                        <input type="submit" class="button r2 b1 ts3" id="button_search" value="Search">
                </form>
            </div>
            <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
     </div>
               </div>                    
            </div>

            <div id="footer-wrap" class="thin_width">
                <div id="footer-container" class="full_width abs dc1">
                    <div id="footer" class="thin_width rel">
                    &#169; 2012 Company, Inc.
                    <ul>
                        <li><a href="/contact">Contact</a></li>
                        <li><a href="/faq">FAQ</a></li>
                        <li><a href="/terms">Terms</a></li>
                        <li><a href="/privacy">Privacy</a></li>
                    </ul>
                   </div>
                </div>
            </div>
        </div>
    </body>
</html>​

Here is the CSS:

/* GENERAL */
html { height:100%; }
body { height:100%; font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size:100%; }
p { font size: 13px; margin: 10px 0; padding: 0; }
h1 { font-size: 22px; }  
h2 { font-size: 17px; }  
h3 { font-size: 14px; } 
blockquote { font-style: italic; }

/*POSITIONING */
.lft { float: left; }
.rgt { float: right; }
.rel { position: relative; }
.abs { position: absolute; }

/* TEXT COLOURS */
.tc6 { color: #4C4C4C; }
.tc5 { color: #333333; }
.tc4 { color: #999999; }
.tc3 { color: #808080; }
.tc2 { color: #F5F5F5; }
.tc1 { color: #FFFFFF; }

/* TEXT STYLING */
.bold { font-weight: bold; }
.italic { font-style:italic; }

/* TEXT SIZES */
.ts5 { font-size: 21px; }
.ts4 { font-size: 18px; }
.ts3 { font-size: 15px; }
.ts2 { font-size: 13px; }
.ts1 { font-size: 11px; }

/* DIV COLOURS */
.dc6 { background-color: #4C4C4C; }
.dc5 { background-color: #333333; }
.dc4 { background-color: #999999; }
.dc3 { background-color: #808080; }
.dc2 { background-color: #F5F5F5; }
.dc1 { background-color: #FFFFFF; }

/* WIDTHS */
.full_width { width: 100%; }
.thin_width { width: 940px; }

/* BORDERS */
.b1 { border: 1px solid; }

/* RADIUS */
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

/* FIELD */
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; padding-left:5px; margin-right: 15px; width:250px; }

/* BUTTON */
.button  { cursor:pointer; font-family: arial, sans-serif; min-width: 70px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; color: white; }
.button:hover { border: 1px solid #2F5BB7; }
.button:active { -moz-box-shadow: 0 0 2px #888; -webkit-box-shadow: 0 0 2px #888; box-shadow: 0 0 2px #888; }

/* BUTTONS */
#button_search { height: 34px; background: url(http://www.divology.com/wp-content/themes/divology/tutorials/google-search/ico-search.png) no-repeat #4d90fe center; border: 1px solid #3079ED; text-indent:-999px; color: transparent; line-height:0; font-size:0; }
#button_primary { border-color: #3079ED; background-color: #55A4F2; }
#button_secondary { border-color: gray; }
#field_regular { height:27px; }

/* FIELDS */
#field_large { height:300px; }

/* HEADER */
#header-wrap { top: 0; left: 0; }
#header-container { line-height: 60px; height: 60px; border-bottom: 1px solid #E5E5E5; }
#header { margin: 0 auto; position: relative; }
#header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }
#header h1 em { color: #90b874; font-size: small; display: block; }
#header ul { top:0; margin: 0; padding: 0; list-style: none; position: absolute; right: 0; }
#header ul li { float: left; margin-right: 5px; }
#header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }
#header ul li a:hover { color: #beffbf;  }

/* CONTAINER */
#container { margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 31px 0 80px 0px; }
#container-wrap { min-height:100%; position:relative; min-width: 940px; }
#logo { height:20px; }

/* FOOTER */
#footer-wrap { bottom: 0; left: 0; }
#footer-container { line-height: 60px; height: 60px; bottom: 0; border-top: 1px solid #E5E5E5; }
#footer { margin: 0 auto; position: relative; }
#footer ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; right: 0; }
#footer ul li { float: left; margin-right: 5px; }
#footer ul li a { color: #90b874; font-size: 12px; padding-left: 10px; padding-right: 10px; text-decoration: none; }
#footer ul li a:hover { color: #beffbf;  }

#faq EM { display:none; }
#faq LI STRONG { font-weight:normal; color:#246; text-decoration:underline; cursor:pointer; }

.hidden { display:none; }

#content{
    background: orange;
    height: auto;
}

#col-main { overflow:hidden;  }

Any input would be much appreciated! Thank you.

​</p>

4

1 回答 1

1

我会把它放在一个答案中,这样你就可以投票和接受;-)

知道了。

只有一点内容:http: //jsfiddle.net/HMsKa/10

内容越多,页面越高:http: //jsfiddle.net/HMsKa/12

我还没有彻底测试过,所以你仍然应该这样做。您可能希望对最小高度部分使用“最小高度快速破解”(dustindiaz.com/min-height-fast-hack)。

于 2012-10-10T14:06:21.660 回答