-3

This is my first time posting and I am new to web development so please bear with me!

On parts of our site we have a white div with text content. I have positioned it so it's inline with other elements on the page. I have been trying to sort out a way that makes the div (#contacttextcontainer) more responsive so that the text is readable regardless of the browser window size. I tried overflow:auto which did contain the text within the div (adding scroll bars when needed) but there is also the issue that at certain browser sizes the div will completely collapse. I tried min-height (display:block, min-height: 100%... and I tried specific pxs as well). but none seem to work....am I missing something??`

I have been testing on Safari.

Any help would be greatly appreciated!! Thank You!!!!

The HTML:

    <div id="contacttextcontainer"> 
     <p></p>
     <p>test test test.</p>
     <p>test</p>
     <p>test test test test test</p>
     <p>STUDIO HOURS;</p>
     <p></p>
     <p>9-4:30 Mon-Fri and by appointment</p>
     <p></p>
     <p>CONTACT;</p>
     <p>555-555-5555</p>
     <p>test test test</p>
    </div>

The CSS

    #contacttextcontainer {
font-size: 16px; 
text-align: center; 
font-family: courier;
position: absolute;
top:335px;
left:315px;
right: 260px;
bottom: 115px;
padding: 20px;
background-color: #FFFFFF;
overflow: auto;
   }
4

1 回答 1

0

好的，如果我们查看您的原始 html / css 我们得到这个：http: //jsfiddle.net/svJUQ/并通过删除底部位置我们得到这个：http: //jsfiddle.net/svJUQ/2/ - 当有不是为 div 指定的底部位置或高度，它的高度设置为默认值 ( height: auto;)，并且 div 将扩展以适应其内容。overflow: visible;除非您想要滚动内容或隐藏内容，否则无需更改溢出的默认值。如果这不是您要找的，请告诉我。

于 2013-01-20T13:40:34.157 回答