请教一个样式的布局问题_html/css_WEB-ITnose
<div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="height:100%;background-color:red"></div>
请问怎么样将d3填满余下的空间?
回复讨论(解决方案)
宽和高都用百分比
xuejun405,你看下d3的style我用了100%的
加一个：html,body{height:100%;}
加了不行
<div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="height:100%;background-color:red"></div>
js更正版，窗口更改大小后也可以重置d3大小
<body style="height:100px;margin:0px"> <div id="d1"> <input type="text" value="hello" /> </div> <div id="d2" style="height:200px;background-color:blue;"></div> <div id="d3" style="background-color:red"></div> </body><script> function resetD3() { var css1 = document.compatMode == 'CSS1Compat'; var h = document[css1 ? 'documentElement' : 'body'].clientHeight; var d1 = document.getElementById('d1'), d2 = document.getElementById('d2'), d3 = document.getElementById('d3') d3.style.height = h - d1.offsetHeight - d2.offsetHeight + 'px'; } window.onload = window.onresize = resetD3;</script>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7455
15
1375
52
77
11
40
19
14
9
Windows 11: 시작 레이아웃을 가져오고 내보내는 쉬운 방법
Aug 22, 2023 am 10:13 AM
Windows 11에서는 시작 메뉴가 다시 디자인되었으며 시작 메뉴에 폴더, 앱 및 앱이 있었던 이전 버전과 달리 페이지 그리드에 배열된 단순화된 앱 세트를 제공합니다. 시작 메뉴 레이아웃을 사용자 정의하고 다른 Windows 장치로 가져오거나 내보내 원하는 대로 개인화할 수 있습니다. 이 가이드에서는 Windows 11에서 기본 레이아웃을 사용자 지정하기 위해 시작 레이아웃을 가져오는 단계별 지침을 설명합니다. Windows 11의 Import-StartLayout이란 무엇입니까? 시작 레이아웃 가져오기는 Windows 10 및 이전 버전에서 시작 메뉴에 대한 사용자 지정을 가져오기 위해 사용되는 cmdlet입니다.
macOS: 데스크탑 위젯의 색상을 변경하는 방법
Oct 07, 2023 am 08:17 AM
macOS Sonoma에서는 이전 버전의 Apple macOS에서처럼 위젯을 화면 외부에 숨기거나 알림 센터 패널에서 잊어버릴 필요가 없습니다. 대신 Mac의 데스크탑에 직접 배치할 수 있으며 대화형이기도 합니다. 사용하지 않을 때 macOS 데스크탑 위젯은 단색 스타일로 배경으로 페이드되어 방해 요소를 줄이고 활성 애플리케이션이나 창에서 진행 중인 작업에 집중할 수 있도록 해줍니다. 그러나 바탕 화면을 클릭하면 풀 컬러로 돌아갑니다. 단조로운 모양을 선호하고 데스크탑의 통일성을 유지하고 싶다면 영구적으로 만드는 방법이 있습니다. 다음 단계에서는 이 작업이 수행되는 방법을 보여줍니다. 시스템 설정 앱을 엽니다.
Windows 11에서 바탕 화면 아이콘 위치 레이아웃을 저장하는 방법
Aug 23, 2023 pm 09:53 PM
Windows 11은 사용자 경험 측면에서 많은 것을 제공하지만 반복이 완전히 오류로부터 안전한 것은 아닙니다. 사용자는 때때로 문제에 직면하며 아이콘 위치 변경이 일반적입니다. 그렇다면 Windows 11에서 데스크톱 레이아웃을 저장하는 방법은 무엇입니까? 현재 창의 화면 해상도를 저장하든 데스크탑 아이콘 배열을 저장하든 관계없이 이 작업을 위한 내장 솔루션과 타사 솔루션이 있습니다. 이는 데스크탑에 많은 아이콘이 있는 사용자에게 더욱 중요해집니다. Windows 11에서 바탕 화면 아이콘 위치를 저장하는 방법을 알아보려면 계속 읽어보세요. Windows 11에서 아이콘 레이아웃 위치를 저장하지 않는 이유는 무엇입니까? Windows 11이 바탕 화면 아이콘 레이아웃을 저장하지 않는 주요 이유는 다음과 같습니다. 디스플레이 설정 변경: 일반적으로 디스플레이 설정을 수정하면 구성된 사용자 지정이
WordPress 웹 페이지 정렬 문제 해결 가이드
Mar 05, 2024 pm 01:12 PM
잘못 정렬된 WordPress 웹 페이지 해결 가이드 WordPress 웹 사이트 개발 시 때로는 웹 페이지 요소가 잘못 정렬되는 경우가 있습니다. 이는 다양한 장치의 화면 크기, 브라우저 호환성 또는 부적절한 CSS 스타일 설정 때문일 수 있습니다. 이러한 잘못된 정렬을 해결하려면 문제를 주의 깊게 분석하고, 가능한 원인을 찾아 단계별로 디버그하고 복구해야 합니다. 이 문서에서는 몇 가지 일반적인 WordPress 웹 페이지 정렬 문제와 해당 솔루션을 공유하고 개발에 도움이 되는 특정 코드 예제를 제공합니다.
HTML과 CSS를 사용하여 반응형 캐러셀 레이아웃을 만드는 방법
Oct 20, 2023 pm 04:24 PM
HTML 및 CSS를 사용하여 반응형 회전판 레이아웃을 만드는 방법 회전판은 현대 웹 디자인의 일반적인 요소입니다. 사용자의 관심을 끌고, 여러 콘텐츠나 이미지를 표시하고, 자동으로 전환할 수 있습니다. 이 글에서는 HTML과 CSS를 사용하여 반응형 캐러셀 레이아웃을 만드는 방법을 소개합니다. 먼저 기본 HTML 구조를 만들고 필요한 CSS 스타일을 추가해야 합니다. 다음은 간단한 HTML 구조입니다: <!DOCTYPEhtml&g
CSS 웹 배경 이미지 디자인: 다양한 배경 이미지 스타일 및 효과 만들기
Nov 18, 2023 am 08:38 AM
CSS 웹 페이지 배경 이미지 디자인: 다양한 배경 이미지 스타일과 효과를 생성합니다. 구체적인 코드 예제가 필요합니다. 요약: 웹 디자인에서 배경 이미지는 페이지의 매력과 가독성을 효과적으로 향상시킬 수 있는 중요한 시각적 요소입니다. 이 문서에서는 몇 가지 일반적인 CSS 배경 이미지 디자인 스타일과 효과를 소개하고 해당 코드 예제를 제공합니다. 독자는 더 나은 시각 효과와 사용자 경험을 얻기 위해 자신의 필요와 선호도에 따라 이러한 배경 이미지 스타일과 효과를 선택하고 적용할 수 있습니다. 키워드: CSS, 배경 이미지, 디자인 스타일, 효과, 코드 표현
H5의 위치 속성의 유연한 적용 기술
Dec 27, 2023 pm 01:05 PM
H5에서 위치 속성을 유연하게 사용하는 방법 H5 개발에서는 요소의 위치 지정 및 레이아웃이 관련되는 경우가 많습니다. 이때 CSS 위치 속성이 작동하게 됩니다. 위치 속성은 상대 위치 지정, 절대 위치 지정, 고정 위치 지정 및 고정 위치 지정을 포함하여 페이지에서 요소의 위치 지정을 제어할 수 있습니다. 이번 글에서는 H5 개발에서 position 속성을 유연하게 활용하는 방법을 자세히 소개하겠습니다.
Windows 11에 키보드 레이아웃이 계속 추가됨: 테스트를 거친 4가지 솔루션
Dec 14, 2023 pm 05:49 PM
일부 사용자의 경우 Windows 11에서는 변경 사항을 수락하거나 확인하지 않더라도 새 키보드 레이아웃을 계속 추가합니다. WindowsReport 소프트웨어 팀은 이 문제를 재현했으며 Windows 11이 PC에 새 키보드 레이아웃을 추가하는 것을 방지하는 방법을 알고 있습니다. Windows 11에 자체 키보드 레이아웃이 추가된 이유는 무엇입니까? 이는 일반적으로 모국어가 아닌 언어와 키보드 조합을 사용할 때 발생합니다. 예를 들어 미국 표시 언어와 프랑스어 키보드 레이아웃을 사용하는 경우 Windows 11에 영어 키보드도 추가될 수 있습니다. Windows 11에 원하지 않는 새로운 키보드 레이아웃이 추가된 경우 어떻게 해야 할까요? Windows 11에서 키보드 레이아웃을 추가하지 못하게 하려면 어떻게 해야 합니까? 1. 불필요한 키보드 레이아웃을 삭제하고 '열기'를 클릭하세요.
