網頁尺寸問題

我有一個網頁，我正在製作一個居中表格。當我的瀏覽器是全屏時，它工作正常，但是當我縮小瀏覽器（或者當我使用瀏覽器空間較少的計算機時，如Mac）時，表的一部分被切斷，並且它不會讓我滾動直到看到整個桌子。下面的圖片顯示了該頁面應該看起來以及何時被切斷。網頁尺寸問題

enter image description here

這裏是我的表CSS：

#inputTable { 
    width:600px; 
    height:780px; 
    position:absolute; 
    margin-left: -300px; 
    margin-top: -390px; 
    top:50%; 
    left:50%; 
    box-shadow: 5px 5px 5px 5px #06246F; 
    table-layout:fixed; 
    overflow:auto; 
}

來源

2013-12-23 user2689931

你爲什麼用絕對位置居中？爲什麼你使用圖像服務而不是創建一個jsfiddle或任何其他代碼編輯器來顯示問題？ – pasine

爲什麼你搞不清邊距和位置設置頂部：50％，然後頁邊距：-390px？你真的需要他們兩個嗎？ – pasine

刪除您的保證金頂部並檢查 –

它是在你的CSS的幾件事情是導致您的問題（由他人作爲說明）的組合。解決方案可能是採取不同的方法來集中您的內容。

分別對顯示錶和顯示錶格單元使用容器和內容div。

.container 
{ 
    width:100%; 
    height:100%; 
    display:table; 
    text-align:center; 
} 
.content { 
    display:table-cell; 
    vertical-align:middle; 
}

我製作了an example in JSFiddle。

對於較大的屏幕，您始終可以使用最大寬度和高度，但您需要百分比以確保它在較小的設備上可見。

來源

2013-12-23 14:02:12 Martyn0627

謝謝！爲了格式化網頁，我正在使用這種方法的一些細微變化。絕對比以前更好。 – user2689931

如果你想中心一個div，你應該避免絕對的位置，除非你真的需要它。

#inputTable { 
    width:600px; 
    height:780px; 
    box-shadow: 5px 5px 5px 5px #06246F; 
    table-layout:fixed; 
    overflow:auto; 
    text-align:center; 
    margin: 100px auto 0; 
}

根據您的需要設置邊距。
這裏是jsfiddle。

來源

2013-12-23 14:04:46 pasine

網頁尺寸問題

回答

相關問題