Html 如何根据内容拉伸DIV

Html 如何根据内容拉伸DIV,html,css,css-position,Html,Css,Css Position,我有一个div,它有一些内容,HTML如下: <div id="subpageFooter"> <div id="subpageFooterLeft"> <div style="z-index: 15; position: relative; left: 0; padding-left: 20px; padding-top: 30px; font-weight: bold; color: #00A0BE; font-size: 13px;"&

我有一个div,它有一些内容,HTML如下:

<div id="subpageFooter">
    <div id="subpageFooterLeft">
        <div style="z-index: 15; position: relative; left: 0; padding-left: 20px; padding-top: 30px; font-weight: bold; color: #00A0BE; font-size: 13px;">
            State-Of-The-Art-Technology
        </div>
        <div style="z-index: 14; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
            Our state-of-the-art technology ensures that we provide the finest healthcare. Our practice continuously invests in systems and equipment so that physicians can diagnose problems in the most accurate and efficient manner possible.
        </div>
        <div style="position: relative; width: 90%; padding-left: 5%; padding-top: 10px; padding-right: 5%;"><hr /></div>
        <div style="z-index: 13; position: relative; left: 0; padding-left: 20px; padding-top: 10px; font-weight: bold; color: #00A0BE; font-size: 13px;">
            Advanced Electronic Medical Records
        </div>
        <div style="z-index: 12; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
            Our advanced electronic medical record improves patient care and gives physicians all of the important patient information they need in one place.
        </div>
        <div style="position: relative; width: 90%; padding-left: 5%; padding-top: 10px; padding-right: 5%;"><hr /></div>
        <div style="z-index: 11; position: relative; left: 0; padding-left: 20px; padding-top: 10px; font-weight: bold; color: #00A0BE; font-size: 13px;">
            Premier Radiology Services
        </div>
        <div style="z-index: 10; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000;font-size: 12px;">
            Filmless radiology capabilities provide rapid results and allow physicians to view images on an office computer screen within minutes. Our premier radiology services include MRI, CT scan, ultrasonography, nuclear medicine, bone densitometry and mammography. We offer computer-aided diagnosis (CAD), which is a tool to assist the radiologist in more accurately diagnosing breast disease.
        </div>
        <div style="position: relative; width: 90%; padding-left: 5%; padding-top: 10px; padding-right: 5%;"><hr /></div>
        <div style="z-index: 9; position: relative; left: 0; padding-left: 20px; padding-top: 10px; font-weight: bold; color: #00A0BE; font-size: 13px;">
            Our Employees Make MED a Special Place
        </div>
        <div style="z-index: 8; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
            MED values each of our employees’ experience, diversity and dedication. Ideas and backgrounds that our employees bring to our company enable us to be more effective in anticipating and exceeding our patients’ needs and expectations. <a class="blueLinks" href="http://www.MEDgroup.com/talented_people.aspx">Click here</a> for the opportunity to meet some of the employees who greatly contribute to our success.
        </div>
        <div style="position: relative; width: 90%; padding-left: 5%; padding-top: 10px; padding-right: 5%;"><hr /></div>
        <div style="z-index: 7; position: relative; left: 0; padding-left: 20px; padding-top: 10px; font-weight: bold; color: #00A0BE; font-size: 13px;">
            Wide Range Of Insurances
        </div>
        <div style="z-index: 6; position: relative; left: 0; padding-left: 40px; padding-top: 10px; padding-right: 8px; font-weight: normal; color: #000000; font-size: 12px;">
            A big advantage to using MED Medical Group is the <a class="blueLinks" href="http://www.MEDgroup.com/participating_insurance.aspx?id=473">wide range of insurance coverage</a> accepted. This means you should be able to keep your doctors even if you find you have to change insurance plans. We care equally about every patient regardless of the insurance provider.
        </div>
    </div>
    <div id="subpageFooterRight">
        <!-- #include virtual ="includeNav/hospAff.inc" -->
    </div>
</div>
当我放大时,内容从
子页面footerLeft
div中消失

如何修改它以使div拉伸以匹配内容?

在css中尝试以下操作:

height: auto;

问题是您正在将
高度:100%
设置为#子页面页脚左侧。删除此规则可修复缩放问题:


您也可以尝试将其放入css中:

溢出:自动

尝试以下操作:

overflow:hidden;
height:1%;

我应该在哪里添加呢?我认为导致问题的原因是我使用了媒体查询,并根据屏幕大小更改样式表。我如何确定它是否是桌面型的?不确定“桌面型”是什么意思。您是否仍有可能在某个媒体查询中指定了
height:100%
或其他高度值?
#subpageFooterLeft {
    position: absolute;
    left: 0;
    float: left;
    width: 60%;
    /* height: 100%; */
}
overflow:hidden;
height:1%;