0

私はここで小さな問題を抱えています.jsfiddleを作成しました.

私が抱えている問題は、避けられない長いコンテンツがある場合、ヘッダーとフッターがそれに合わせて伸びず、最大のブラウザ ウィンドウまで伸びてしまうことです。

ストレッチする方法を見つける必要があります。代わりに、ヘッダーとフッターをコンテンツ div の一部にするという考えがありましたが、コンテンツがブラウザー ウィンドウよりも短い場合、幅 100% には伸びません。ブラウザウィンドウのそれは私が望んでいないことです。

また、ページのタイトル/サブタイトルはコンテンツよりも長くなる可能性があるため、どちらも役に立ちません:/

デザインを変えたいのですが、レポートサイト用なので余裕を持って入れられません: 0 auto; ウェブサイトを中央に配置したり、レポートを固定幅にしたりすることが目的ではないためです (どちらもできないため)。

アイデアは、JSを避ける​​ことでもあります。JQueryを使用して幅を修正できることは知っていますが、プロジェクトは外部クライアントでも使用できるため、JSを使用するよう強制することはできません. 奇妙なことですが、愚かなシステム管理者がJSをブロックし、それを機能させる以外に何もできないというケースを見てきました。

私は HTML5 と CSS3 を使用できるので、これら 2 つのテクノロジでそれを行う方法があれば、それは素晴らしいことです :)

どんなアイデアでも大歓迎です！

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

基本的に、「ヘッダー」要素内にコンテンツとフッターを含めて、コンテンツが成長するようにする必要があります。

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 に答える
0

前回の投稿のように、ここで word-wrap を使用して、幅を好きなように設定します。私はあなたのためにそれを 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 に答える