`

div高度适配

 
阅读更多 

function doResize(divID) {
	    	//store logo图片高度
	    	const appconHeight = 110;
	    	//store容器高度
	    	var shelfOuterHeight = $(window).height()-540<appconHeight?appconHeight:$(window).height()-540;
	    	//共显示几行store
	    	var rowsCount = Math.floor(shelfOuterHeight/appconHeight);
	    	//store容器占用的高度
	    	var shelfInnerHeight = appconHeight*rowsCount;
	    	//留白的高度
	    	var marginTop = (shelfOuterHeight-shelfInnerHeight)/2;
	    	var shelfSizeStyle = "height: "+shelfInnerHeight+"px;";
	    	shelfSizeStyle += "margin-top: "+marginTop+"px";
	    	 $("#itemStoreShelf").attr("style",shelfSizeStyle);
	    	 $("#container").attr("style","height:"+($(window).height()-118)+"px");
	    	 $("#storeall_con").attr("style","height:"+shelfOuterHeight+"px");
	    }

 

<div id="storeall_con">
        <div class="applist_con" id="appList_con1">
        	<div id="store_list_show" class="list_show">
	            <div id="itemStoreShelf" class="list_show">
	            	<!-- 显示div -->
	            </div>
                </div>
        </div>
</div>

 

<body onload='doResize("appList_con1");' onresize='doResize("appList_con1");'>
 

 去掉所有div中height的高度值。

分享到：
| struts2-2.2.1 spring2.5.6 整合
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV自动适应高度

    这种技术使得页面中的多个DIV元素能够根据内容动态调整高度，保持整体的视觉一致性，无论哪个DIV的内容发生变化，其他DIV都能自动适配，以确保它们的高度保持一致。以下是对这个知识点的详细讲解： 1. **什么是DIV*...

    div+css float 布局，适配手机

    在高洛峰老师的 `div+css` 视频教程中，他可能详细讲解了如何创建浮动布局，包括设置 `div` 的宽高、设置 `float` 属性、清理浮动（clear floats）以防止父元素高度塌陷，以及如何使用媒体查询进行响应式设计。...

    CSS设置盒子容器(div)高度(height)始终为100%

    然而，直接在CSS中为一个元素（如`div`）设置`height: 100%`并不总是有效，因为这涉及到CSS布局中的层次关系和百分比高度的计算规则。这个问题在描述中已经有所提及，现在我们将深入探讨这个问题，并提供解决方案。 ...

    js解决div内图片自适应大小

    如果图片高度大于div高度，可以调整条件判断，或者结合CSS的`object-fit`属性来实现更灵活的适配。 对于浏览器兼容性，IE6/7/8不支持`naturalWidth`和`naturalHeight`属性，我们需要用jQuery或者其他库来获取原始...

    div 模拟下拉列表

    由于老版本的IE浏览器对某些CSS属性和JavaScript特性支持不佳，因此在实现时需要特别考虑这些浏览器的适配，比如使用条件注释、CSS hack或jQuery的浏览器检测来处理差异。 创建div模拟下拉列表的基本步骤如下： 1....

    css+div入门教程（很详细）

    例如，你可以看到如何使用Div和CSS创建一个两列布局，以及如何利用媒体查询实现不同屏幕尺寸下的适配。 五、进一步学习 掌握CSS+Div只是网页设计的第一步，后续你还需要学习更高级的CSS3特性，如过渡(transition)、...

    div+css 不错的学习实例

    使用媒体查询（media queries）和百分比单位可以实现不同屏幕尺寸下的适配，确保在各种设备上都有良好的用户体验。 5. **Flexbox布局**：Flexbox是一种现代化的布局模式，解决了传统Div+CSS布局的一些难题，如...

    div模拟select下拉菜单美化效果

    通过以上步骤，我们可以创建出一个具有高度定制化和美化效果的下拉菜单。这种技术广泛应用于现代Web应用，提供了一种优雅的解决方案，解决了传统`&lt;select&gt;`元素在样式和交互上的局限性。在实际开发中，可以根据项目...

    Div浮动的简单实现

    浮动布局可以帮助实现不同屏幕尺寸下的适配，但更推荐使用媒体查询（media queries）结合Flexbox或Grid来实现更精确的响应式布局。 5. **性能考虑**：虽然浮动布局简单易用，但它可能导致一些性能问题，特别是在...

    div宽度自适应布局(右边自适应)

    在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...

    css模板 css div模板

    CSS `div`模板是一组预先定义的CSS类，专门用于控制`div`元素的样式，如宽度、高度、边距、背景色、边框等。这些模板可以方便地应用于不同的页面区域，如页头、主体内容、侧边栏和页脚，帮助构建复杂的多列布局。 *...

    案例6：DIV+CSS样式页面布局(重要).rar

    `DIV`元素本身无特定含义，但可以通过CSS赋予其不同的样式属性，如宽度、高度、颜色、边距等。它能帮助组织网页内容，创建模块化的设计，使页面结构清晰，便于维护和调整。在实际布局中，`DIV`通常与其他元素配合...

    后台管理界面DIV+CSS

    5. **浮动与清除**：早期的网页布局常用浮动（`float`）实现流式布局，但易引发父元素高度塌陷等问题，现在更多地使用Flexbox和Grid替代。 6. **颜色与字体**：后台界面通常需要专业且清晰的视觉风格，通过颜色搭配...

    Div+CSS 布局大全.pdf

    文档通过提供CSS布局实例，一步步地引导读者从确定布局开始，到定义body样式和主要div，最终实现100%自适应高度的布局。这包括了不用表格实现的菜单布局，无论是纵向还是横向。 ### 常见错误和校验 文档还指出了...

    css+div 教程

    通过CSS，我们可以对Div进行样式设置，如宽度、高度、边距、背景色等，使其成为构建复杂网页结构的基础模块。 **三、标准化布局** 标准化布局，也称为“盒模型布局”，是指遵循W3C标准的CSS布局方式。它主要涉及盒...

    js弹出模态效果div

    - `div1.style.width` 和 `div1.style.height`：设置`&lt;div&gt;`元素的宽度和高度。这里根据浏览器的可用宽度和文档的高度来动态计算，确保模态框可以覆盖整个屏幕。 3. **HTML结构**： ```html &lt;div id="aaa" ...

    css+div模板

    3. **响应式设计**：通过媒体查询实现不同设备上的适配，使网页在手机、平板和桌面电脑上都能良好显示。 4. **层叠性**：当存在多个样式规则时，CSS会根据优先级进行层叠，确保样式的一致性。 **Div元素** Div是...

    CSS+DIV实例

    1. **页面分区**：通过设置宽度、高度和位置，`&lt;div&gt;`可以划分页面的不同区域。 2. **创建布局网格**：利用浮动（float）和清除（clear）属性，可以创建多列布局。 3. `display`属性：可将`&lt;div&gt;`设置为块级元素...

    Div+CSS基础代码网页布局+实例教程.pdf

    这个例子中，`.example`类的CSS样式定义了一个具有固定宽度和高度、黑色边框、内边距和背景色的`&lt;div&gt;`元素。 总之，Div+CSS是现代网页设计的核心技术，通过合理地利用CSS，开发者可以创建美观、响应式的网页，同时...

Magicbox
Global site tag (gtag.js) - Google Analytics