0

我在这里遇到了一个小问题，我制作了一个 jsfiddle 供你们玩：http: //jsfiddle.net/darkguy2008/NQUz8/

我遇到的问题是，当有不可避免的长内容时，页眉和页脚不会延伸到它，而是延伸到最大浏览器窗口。

我需要找到一种让它伸展的方法，我有一个想法让页眉和页脚成为内容 div 的一部分，但如果内容比浏览器窗口短，它们就不会拉伸到 100% 宽度的浏览器窗口，这就是我不想要的。

此外，页面的标题/副标题可能比内容长，这样也无济于事：/

我很想改变设计，但它是一个报告网站，我不能把它放在边距：0 auto; 因为这个想法不是使网站居中或使报告具有固定宽度（因为它们也不能）。

这个想法也是为了避免JS。我知道我可以使用 JQuery 修复宽度，但是该项目也可以被外部客户端使用，所以我们不能强制他们使用 JS。我知道很奇怪，但我见过愚蠢的系统管理员阻止 JS 的情况，我们对此无能为力，只能让它发挥作用。

我可以使用 HTML5 和 CSS3，所以如果有办法用这两种技术做到这一点，那就太好了 :)

欢迎任何想法！

HTML：

<header>
    <div class="wrap">
        <table border="0">
            <tr>
                <td rowspan="2">
                    <img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" />
                </td>
                <td>
                    <h1>title 1 lololol</h1>
                </td>
            </tr>
            <tr>
                <td>
                    <h2>subtitle omgomgomgomgomg</h2>
                </td>
            </tr>
        </table>
    </div>
    <div id="menu">menu goes here omg</div>
</header>
<div>contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div>
<footer>
    <div class="wrap">
        <p>Footer goes here o.o"</p>
    </div>
</footer>

CSS：

/*********************/
/** RESET */
/*********************/
*  
{
    padding: 0;
    margin: 0;
    /*border: 0;*/
    font-family: Arial;
}

/*********************/
/** Main CSS */
/*********************/
body 
{
    font-family: Arial;
    font-size: 10pt;
}

.wrap 
{
    position: relative;
    margin: 0 0;
    width: 640px;
}

header, footer
{
    background: #0f6;
    float:left;    
    min-width:100%;
}

#menu
{
    min-width: 100%;
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

th, td { padding: 0; }
table { border-collapse:collapse; border-spacing: 0; }
4

2 回答 2

0

与上一篇文章一样，在此处使用自动换行并将宽度设置为您想要的任何值。我为您将其设置为 100%，但它只适用于您拥有的最大宽度。http://jsfiddle.net/NQUz8/2/ 

 <div style="word-wrap:break-word; width="100%;">content here</div>

如果可以的话，我会使用某种类型的 css 类或 id。我只是在这里使用样式来向您展示它是如何工作的。

于 2013-07-26T13:36:35.330 回答
0

基本上，您必须在“页眉”元素中包含内容和页脚，这样您的内容才能使其增长。

HTML

<div>
<header>
    <div class="wrap">
        <table border="0">
            <tr>
                <td rowspan="2">
                    <img src="http://dummyimage.com/230x100/000/fff&text=LOGO" align="left" style="border-width:0px;" />
                </td>
                <td>
                    <h1>title 1 lololol</h1>
                </td>
            </tr>
            <tr>
                <td>
                    <h2>subtitle omgomgomgomgomg</h2>
                </td>
            </tr>
        </table>
    </div>
    <div id="menu">menu goes here omg</div>
    <div class="content">contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</div>
    <footer>
    <div class="wrap">
        <p>Footer goes here o.o"</p>
    </div>
</footer>
</header>


</div>

CSS中的修改：

.content
{
    background: #FFFFFF;
}

这是一个工作小提琴：

小提琴

于 2013-07-26T13:44:42.100 回答