当我使浏览器宽度变小时，文本会被推离页面，最终消失(When I make the browser width smaller, text gets pushed off the page, and eventually disappears)
每当我使浏览器宽度变小时，文本就会消失。 即使浏览器较小，我希望文本保持可见。 有关如何实现此目的的任何提示。 我尝试了所有主流浏览器并且是一样的。
演示： http ： //jsfiddle.net/J8fjV/1/
我的CSS
<style type="text/css"> html, body { height : 100%; min-height : 100%; } body { background : url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz-vXYldxqtANJ0BbLtSBtGQfhKHBZhtJYUDvsAFl0vbKs4USP) center center no-repeat fixed #000000; } #wrapper { margin: 0 auto; width:50%; } #footer { position: absolute; bottom: 0; margin-left: 12.5%; width: 50%; background-color:#000000; height:30px; } body {color:white;} body { font-family: 'Noto Sans', Verdana, sans-serif; font-size: 12px; } h1 { font-family: 'Share Tech', Verdana, sans-serif; font-weight: 400; font-size: 12px; } #main{ width: 100px; height: 100px; background-color: transparent; position: absolute; top:0; bottom: 100; left: 500; right: 0; margin: auto; } </style>我的HTML
<body style="overflow:hidden; margin:0"> <div id="wrapper"> <div id="footer"><h1>Text here</h1> </div> </div> <div id="main">Text</div>Whenever I make the browser width smaller, text disappears. I want the text to stay visible, even when the browser is smaller. Any tips on how to accomplish this. I tried all major browsers and is the same.
demo: http://jsfiddle.net/J8fjV/1/
My CSS
<style type="text/css"> html, body { height : 100%; min-height : 100%; } body { background : url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz-vXYldxqtANJ0BbLtSBtGQfhKHBZhtJYUDvsAFl0vbKs4USP) center center no-repeat fixed #000000; } #wrapper { margin: 0 auto; width:50%; } #footer { position: absolute; bottom: 0; margin-left: 12.5%; width: 50%; background-color:#000000; height:30px; } body {color:white;} body { font-family: 'Noto Sans', Verdana, sans-serif; font-size: 12px; } h1 { font-family: 'Share Tech', Verdana, sans-serif; font-weight: 400; font-size: 12px; } #main{ width: 100px; height: 100px; background-color: transparent; position: absolute; top:0; bottom: 100; left: 500; right: 0; margin: auto; } </style>My HTML
<body style="overflow:hidden; margin:0"> <div id="wrapper"> <div id="footer"><h1>Text here</h1> </div> </div> <div id="main">Text</div>
最满意答案
我真的不明白#wrapper元素的使用。
尝试删除它。 然后将#footer的CSS设置为：
position: absolute; bottom: 0; width:100%; background-color:#000000; height:30px;然后，您将要添加：
width:100%; white-space:nowrap; text-align:center; padding:0;到#h1 css。
告诉我它是否能满足您的需求......
I do not really understand the use of the #wrapper element.
Try deleting it. Then set the css of #footer to:
position: absolute; bottom: 0; width:100%; background-color:#000000; height:30px;You will then want to add:
width:100%; white-space:nowrap; text-align:center; padding:0;to the #h1 css.
Tell me if it gives you what you were looking for...
更多推荐
发布评论