Question

我想将蓝色的.content扩展到屏幕底部。我尝试过

.content {
  height: 100%;
}

html {
  height: 100%
}

此处的完整代码：https://jsfiddle.net/39v5ehwx/

在将窗口扩大到最大后，请检查它，您会看到蓝色的内容区域没有延伸到底部。在.content内，高度仅以像素为单位

Answer 1

看一下jsfiddle，您需要制作父元素def make_a_booking(name_room, day, hour_start, duration): print(name_room, day, hour_start, duration) # connect to the localhost database cnx = mysql.connector.connect(password='MySQL.2019', user="root", database="alex") #day_only : get the parsed date day_only = str(dateparser.parse(day).date()) # parse the hour in string inputed by the user and convert it the a pendulum object hour_start_parsed = dateutil.parser.parse(hour_start, fuzzy_with_tokens=True) pendulum_combined_day_and_hour_start = pendulum.parse(str(day_only) + " " + hour_start, strict=False) # convert the duration in string inputed by the user and to seconds then in minutes duration_in_seconds = convert_time(duration) duration_in_minutes = duration_in_seconds / 60 # add the duration_in_minutes to the starting hour to get the hour start pendulum object pendulum_combined_day_and_hour_end = pendulum_combined_day_and_hour_start.add(minutes = duration_in_minutes) #print(pendulum_combined_day_and_hour_end) # check if the room is available room_available = is_the_room_available(name_room, day_only, pendulum_combined_day_and_hour_start, pendulum_combined_day_and_hour_end, cnx)，然后可以对其他元素使用100vh进行一些工作。

将display:flex上的height:100%替换为：

.wrapper

然后，将.wrapper { /* height: 100% */ height: 100vh; display: flex; flex-direction: column; }替换为min-height: 100%。这会将元素拉伸到剩余空间的全部高度（这与父级上的flex: 1一起使用）：

display:flex

如何使内容div的高度达到屏幕的100％

1 个答案: